Centering 2 Background Images in the Browser?

[csokul]

Hi All,

I am trying to create a centered background image (larger than the content) with the site content centered over the image, so when the browser resizes both stay centered independently. I can get the wrap to center but not independently. Is that possible? Still pretty new to html and css.

i.e.

css:

#page-wrap {width: 1280px; height: 1400px; margin: 0 auto; background:url(../images/background.jpg) no-repeat;}

#site-content {width: 860px; height: 1000px; margin: 0 auto; background:url(../images/background.jpg) no-repeat;}

Thanks
Craig

[TheDoc]

Make sure to add ‘top’ and ‘center’ to the bg:

background:url(../images/background.jpg) top center no-repeat;

[csokul]

Thanks TheDoc, I forgot to include in my example, I still am having problems with them being “centered independent” to the browser.

[TheDoc]

Hmmm, maybe I’m not sure what you’re trying to do.

If it isn’t centering to the browser window, what’s it supposed to center to?

[csokul]

It is suppose to center in the browser but the #page-wrap image independent of the #site-content image. Does that make sense? So as the browser get larger or smaller each div would stay centered.

[Author]

Posts