Forums

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

Home Forums CSS Background Images for the Header, Content Area and Footer

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #39159
    rafaelocean
    Member

    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;
    }

    #107141
    Paulie_D
    Member

    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.

    #107142
    rafaelocean
    Member

    thanks paulie, that was really helpful!

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