Grow your CSS skills. Land your dream job.

[Solved] Multiple Background Images

  • # June 18, 2010 at 2:19 pm

    What I want to have a textured background that has three different colors. One that repeats across the top, for a header; one that repeats across the middle, for the content; and one the repeats across the bottom, for the footer. My original plan was just to create three DIVs with background images that repeat-x. The problem with that is the images do not extend all the way to the edges of the browser. My second thought was to repeat a textured background in my body, and then layer transparent colors over it, but I don’t have any clue how to do that or if it is even possible.

    Here is an image of what I want:
    http://www.flickr.com/photos/katiki/4711804081/

    Here is the code I have:

    HTML:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    CSS:

    Code:
    body {

    }

    .menu_back {
    background-image: url(images/backgrounds/grunge_tan.jpg);
    background-attachment: scroll;
    background-repeat: repeat-x;
    background-position: top-left;
    height: 46px;
    }

    .content_back {
    background-image: url(images/backgrounds/grunge_light_blue.jpg);
    background-attachment: scroll;
    background-repeat: repeat-x;
    background-position: top-left;
    height: 390px;
    }

    .foot_back {
    background-image: url(images/backgrounds/grunge_dark_blue.jpg);
    background-attachment: scroll;
    background-repeat: repeat-x;
    background-position: top-left;
    height: 125px;
    }

    Thanks!

    # June 18, 2010 at 2:54 pm

    The repeating background images should extend to the edge of the browser window. Since divs are block level elements, they should expand to 100% of their parent – in this case the body.

    I would guess that by default, the body tag has some padding or a margin on it. For example, Firefox gives the body tag 8px of margin by default. I would implement a reset style sheet or simply add the below to the body selector in your css.

    Code:
    margin: 0;
    padding: 0;

    Aside from all of that, your solution should work fine.

    # June 18, 2010 at 3:09 pm

    That worked perfectly! Thank you!

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".