How To Use Multiple CSS Backgrounds, a Tutorial
Tuesday, June 2nd 2009 7:44pm
For a dynamic visual effect, layering different textures can do the trick. Graphics and multiple patterns can be meshed together by the browser creating new life in a design. My example is rather simple — live demo & source files
The Basics of Multiple CSS Backgrounds
Let's take a look at the general page model. We'll see that by default we have two containers: <html> & <body>. <div>'s can be nested inside <div>'s until a browser runs out of RAM. These three page elements are our weapon of choice because they 'display:block;' by default.
We can see that the browser draws the <html> layer first and the <body> layer is placed on top. <div>'s, by default, continue the same way with the most nested <div>'s on top. But, if we wanted, could play with the sorting of these layers using the CSS attribute 'z-index'.
Top and Bottom Background Graphics
I slapped together a colorful background header image in photoshop. It fades to black along the outer edges, so we'll set our background color to black as well. The graphic is actually 1200x300 pixels in size. With the CSS it will visually come out cropped and center on smaller displays (i.e. 1024x768).
Then I spun it around 180° for the footer.
Here is the CSS for the page's top and bottom backgrounds.
background: #000 url(bottom_bg.jpg) no-repeat center bottom;
background: transparent url(top_bg.jpg) no-repeat center top;
font-family: Trebuchet MS, sans-serif;
First, I set margins and padding to zero on all page elements. Then, since <html> is the bottom-most layer I give it the color black and the bottom graphic. <body> gets it's color set to transparent and the top graphic. This way the top graphic will visually be on top of the footer graphic if our page is too short. The <body> tag is also where I set the default font to a white trebuchet. I am not certain, but I imagine that it could be placed in either <html> or <*> as well.
More Texture with Alpha PNG Layers
Now I add two more <div>'s each with their own alpha .png background. The two separate patterns create a new pattern output from the browser —
Ok, you caught me, I'm a pixel junkee. Patterns can be as large as a designer wants. But because the 24bit .png's are so small and simple they come out to ~150 bytes each. With transparent .gif's a pixel is either on or off, you have no opacity options, and you only get 255 colors, but they will help your bandwidth footprint for larger images.
The CSS for these two background layers —
background: transparent url(rgb.png);
background: transparent url(rgb2.png);
When it comes to nesting blocks inside blocks, 'overflow:auto;' is your friend! It tells the browser to draw the <div> (or whatever block element you are using) as large as all of it's contents. This is very important because the <div> is there to stretch its background across the whole page.
One more word on alpha .png's — they are not supported by Internet Explorer before version 7 without a filter being applied in the CSS. Fortunately, enough time has passed that we can say goodbye to IE6. It is important, however, to concern ourselves with such elusive browser dinosaurs still roaming the internets.
Tie it all Together with HTML
Let's take a look at the html skeleton —
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<link href="multi-bg.css" type="text/css" rel="stylesheet">
Multiple Backgrounds a-Go-Go
<html> begot <head> & <body>. <body> begot #pageWrap1. #pageWrap1 begot #pageWrap2. #pageWrap2 begot #header, #middle & #footer and all their children and all their children's children so on for the ages.
Above is a preview of the final output. We can see here three active layers working together as rendered by the browser. Actually turned out kind of nice, huh? =D/
posted by Langel
Leave a Comment