firteendesign
"Computers are my best friends. When I help people find each other without knowing they used a computer, my best friends and I revel in our little secret!"    -Langel

 

 

SHARE

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.

*	{
padding: 0;
margin: 0;
}

html {
background: #000 url(bottom_bg.jpg) no-repeat center bottom;
}

body {
background: transparent url(top_bg.jpg) no-repeat center top;
overflow: auto;
color: #fff;
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 —

#pageWrap1	{
background: transparent url(rgb.png);
overflow: auto;
}

#pageWrap2 {
background: transparent url(rgb2.png);
overflow: auto;
}

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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link href="multi-bg.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="pageWrap1">
<div id="pageWrap2">
<div id="header">
<div id="logos">
Multiple Backgrounds a-Go-Go
</div>
<ul id="menu">
...
</ul>
</div>
<div id="middle">
...
</div>
<div id="footer">
...
</div>
</div>
</div>
</body>

</html>

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

There is one major flaw with this design. The footer graphic will not align with the bottom unless #header, #middle & #footer together are as tall as the browser's window. If the footer graphic wasn't there this wouldn't be an issue. This is something to consider and could be fixed with javascript or browser hacks.

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/

live demo & source files

posted by Langel

1 Comment

We've been providing free product samples of top quality Belgium chocolates.
To become eligible, simply answer our comment with your address
and we will mail it out over the following business day.

posted on Thursday, June 12th 2014 8:16pm

Leave a Comment

*name
*email
website
comment
no html