Div layout with 3 backgrounds
January 20th, 2013
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.
Body background
Let’s start with setting the CSS for the <body>.
| CSS |
|---|
|
body { margin: 0; background: #334359 url(bg_01.gif) center top; } |
CSS Explanations:
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.
Horizontal 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; } |
CSS Explanations:
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.
Vertical Background
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; } |
CSS Explanations:
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!
Conclusion
To summarize, here are the main points:
- If you can’t use the body to put your horizontal background, you will need a div that wraps around the layout with the horizontal background. It needs to be width: 100%.
- Use repeat-x in your background CSS to tile a background horizontally and not vertically.
- Use repeat-y in your background CSS to tile a background vertically and not horizontally.
- Not specifying a repeat will just tile the background in both directions.
Leave a Reply