This tutorial assumes you already know how to contain floats properly and create a centered div layout. If not, please start with those 2 tutorials!
We will be making a div layout that has 3 backgrounds: body background, horizontal background, and vertical background.
Let's start with setting the CSS for the <body>.
| CSS |
|---|
|
body { margin: 0; background: #334359 url(bg_01.gif) center top; } |
margin - I'm setting all of the margins to 0, so that my other backgrounds can touch the edges of the screen.
background: #334359 - This is a color for the background incase the image background doesn't load.
background: url(bg_01.gif) - This is our image background that will fill the body.
background: center top - The image background will start at the top center and fill outward from there. When I'm making a centered layout, I normally center the background as well.
Now we have a tiled background.
To make a horizontal background on top of the background we already have, we need a div that goes the full width of the screen and wraps the layout. I'm going to call this an hwrap (horizontal wrap).
| HTML | CSS | |
|---|---|---|
|
<div id="hwrap"> </div> |
body { margin: 0; background: #334359 url(bg_02.gif) center top; } #hwrap { width: 100%; background: url(bg_02.gif) center top repeat-x; min-height: 270px; overflow: hidden; } |
width - Since we want it to go the full width, we set it to 100%.
background: transparent - Note that I didn't write transparent, but when you don't specify a color, it defaults to this. We want it transparent so the body background shows in areas the hwrap doesn't.
background: url(bg_02.gif) - This is the image background that goes horizontally.
background: center top - Like the body background, I also want this one to start at the top center and fill outward from there.
background: repeat-x - This means the background should only repeat horizontally. That way it doesn't tile vertically.
min-height - The div can grow more than 270px, but its minimum height is 270px. I added this incase the content wasn't long enough to make the whole horizontal background show. (My horizontal background image is 270px in height.) This is totally optional.
overflow: hidden - As explained in the containing floats url, this will contain any floats that might be in this wrapper.
That code added a horizontal background on top of our body background. Notice how it only goes across once and doesn't repeat again vertically. This is thanks to the repeat-x in the background code.
Now for the last part. We will add a vertical background for our content area. I'm adding it to my layout wrapper.
| HTML | CSS | |
|---|---|---|
|
<div id="hwrap"> <div id="wrapper"> Content here! </div> </div> |
body { margin: 0; background: #334359 url(bg_02.gif) center top; } #hwrap { width: 100%; background: url(bg_02.gif) center top repeat-x; min-height: 270px; overflow: hidden; } #wrapper { width: 450px; margin: 0 auto; background: #C6CCD3 url(bg_03.gif) repeat-y; overflow: hidden; } |
width - Just setting the width of my content area. This is also the same width as my vertical background.
margin: 0 auto - As explained in the centered div layout, this is what centers the layout.
background: #C6CCD3 - I do want to set a color incase the image doesn't load. Otherwise, the text would be too hard to read against the body background.
background: url(bg_03.gif) - This is the image background that goes vertically.
background: left top - Note that I didn't actually write this. When you don't specify the position, it will default to the top left corner. In this case, I don't care that it doesn't start in the center because it doesn't repeat horizontally. I do want it at the top to match with the body and horizontal background though.
background: repeat-y - This means that the background will repeat vertically, but it won't tile horizontally.
And here it is, all 3 backgrounds!
To summarize, here are the main points: