- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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 !
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.
Yep, they both work. Thanks a lot Dustin !