The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Centering Multiple BG Images

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #41565

    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]( “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 !

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.