[Solved] Multiple Background Images - CSS-Tricks

This topic is empty.

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

Author

Posts
June 18, 2010 at 2:19 pm #29416

katiki
Member

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:

Kirkland Portfolio – Home

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 #78204

cmoist
Member

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 #78206

katiki
Member

That worked perfectly! Thank you!
Author

Posts

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

The forum ‘CSS’ is closed to new topics and replies.