Centering Multiple BG Images

[foxfox7]

Hello all ! I’m new to the forum…

I’m just starting to learn CSS and I’m stuck on how to center multiple background images on a page. For example…

My HTML is simple with only a couple of DIVs at this point:

For the CSS I am trying this:

body {
background-color: #0c0c0c;
}

#container {
background: url(images/page-bg.jpg) top center no-repeat;
height: 810px;
width: 1012px;
margin: 0 auto;
}

#main-top {
background: url(images/welcome-bg.png) no-repeat;
background-position: center;
height: 476px;
width: 892px;
}

The container BG image centers as I would expect, but the main-top image just sticks to the edge of the container. Of course I can use margin to pull it center, but why isn’t the background-position: center tag working? I have a feeling it has to do with inheritance, but I’m lost and my research hasn’t turned up much.

[Here’s](http://i.imgur.com/NDjBz.jpg “Screenshot”) a screenshot.

I would appreciate any help !

[DustinWoods]

Your #main-top background is centering, but the div itself is not centered inside #container. Using margin: 0 auto; should work fine for centering the div.

Edit: An alternative (if you don’t want to use margin), you could set #main-top width to 100% instead.

[foxfox7]

Yep, they both work. Thanks a lot Dustin !

[Author]

Posts