Get a free trial // Grow your CSS skills // Land your dream job

Background Images for the Header, Content Area and Footer

  • # August 1, 2012 at 7:47 am

    So I want to use three background images for the header, content area, and footer. I am just struggling to position them in the correct order. Should I be using the background-position or background size selectors? Or something else? I was assuming I could do all of this work in my body tag or do I need to use separate divs in or outside my wrapper?

    My wrapper is always centered but, I wanted all three of bg images to repeat horizontally across the full screen of the browser for better aesthetics. My css is below.


    body {

    #wrapper {
    width: 850px;
    margin: 10px auto;

    nav {

    footer {
    text-align: center;

    .content {
    margin-top: 20px;
    color: white;

    # August 1, 2012 at 8:40 am

    You have to add wrappers to each of the sections (top, middle & bottom) and then add divs inside each of those for your content.

    Here’s an example with just colours:

    Just substitute in your images.

    # August 1, 2012 at 9:18 am

    thanks paulie, that was really helpful!

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed