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.

    /*************************
    Styles
    *************************/

    body {
    background-image:url(‘../img/index/subtlenet2.png’),
    url(‘../img/index/paper_2.png’),
    url(‘../img/index/low_contrast_linen.png’);
    }

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

    nav {
    }

    footer {
    bottom-margin:0;
    width:100%;
    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: http://codepen.io/Paulie-D/pen/cjzxw

    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.

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