Forums

Center background image

Permalink
I am just learning how to code and enjoying it most of the time. However, I have just hit a roadblock. I am trying to center and stretch a background image. It shows up without a problem, but I want it to scale to fit any browser. I know this is a common problem and have played with various bits of code others used to fix the problem to no avail.
Here is the code I have so far.

<div style=body {background: url(http://www.dlzilla.com/files/7613/8550/0859/Superzillabkgrnd.jpg) no-repeat center center fixed;"
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

</div>

The page ishttp://www.dlzilla.com/about/super/...
Any help is greatly appreciated.
 
enlil replied on at Permalink Reply
enlil
Here is an example I used on a site:

background-image: url("http://yoursite.com/path/to/image/image.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
background-size: cover;
herbyderby replied on at Permalink Reply
herbyderby
You could also use this:

html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

As cross-browser compatible as possible, centers the image and does not cause browser scrollbars.