Forums

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:

<body>

</body>

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 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 !

treehouse : what would you like to learn today?

Forums

[Solved] Centering Multiple BG Images