Grow your CSS skills. Land your dream job.

Centering Multiple BG Images

  • # December 23, 2012 at 8:35 pm

    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 !

    # December 23, 2012 at 8:53 pm

    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.

    # December 23, 2012 at 9:01 pm

    Yep, they both work. Thanks a lot Dustin !

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".