How To Use Multiple CSS Backgrounds, a Tutorial

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

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

5 Comments

ThemeDIgital

hehe, obvious way of dealing with 2 bgs :)

Although when I saw your CSS code, it looked as common sense, it actually never crossed my mind to do so :)

Will keep in mind when launching the site, maybe I find some use for this great technique :)

Thanks!

posted on Friday, July 3rd 2009 1:14am

RyanG

I was wondering if you could show how to make a footer stay at the bottom, for I had once done a site (which the client actually bailed on me without even seeing any drafts) and I was wanting to do a nice footer with content like you see on a lot of blogs now days, and I couldn't get the footer to stay at the bottom unless their browser window was the same height as the page or smaller. :( I tried some hacks I had found but they never worked! any suggestions would be appreciated!

posted on Monday, July 13th 2009 9:55am

Noman

Hi, I'm totally new to HTML. I started yesterday so I have absolutely no idea about how CSS or div works. I'm trying to make my first website and the trouble I'm facing is this:

1. I want my website banner to stick to the top of the browser's edge much like your banner only mines will be repeated along the x-axis.

2. I want another background pattern that runs along the rest of my page like your Red pattern

Now I have managed to repeat my banner along the x-axis but I cannot get it to stick to the browsers top edge, there is a space between the the browser and the image of my banner. I know your banner is a background image but I want my image banner to stick to the top.

I'm having trouble adding the red pattern as it is a 2nd background.

Can you please assist me and tell me the steps from scratch. Once again I started yesterday.

posted on Monday, July 20th 2009 12:29am

gUitlesit

Who believes this? http://www.google.com/search?q=2012

posted on Wednesday, September 14th 2011 1:42am

Annie_M

THANK YOU for this demo!! I've been trying to figure this out on my own and hadn't been able to find any good explanations.

posted on Wednesday, November 9th 2011 8:35pm