Resizable Background Image

I have the following code but my image won't resize, how come? Does the image need to be bigger?

Solution 1:

You also need this:

html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
img#background {     
    position: absolute;     
    top: 0;     
    left: 0;     
    width: 100%;  
    height: 100%; 
    margin:0;
    padding:0;
} 

Note, using css3 you can do this:

body{
    background:url(...) no-repeat;
    background-size: 100%;
}

Edit: Missed a ;

Demo:

http://jsfiddle.net/jJT45/

Solution 2:

You're setting it to 100%, but 100% of what? Try giving the body the same 100% height and width properties and see what happens.

Share