Packaging Disaster with the Creative I/O USB Dongle
How To Use Multiple CSS Backgrounds, a Tutorial
Let's Battle Comment Spam with a PHP/MySQL DNSBL and no CAPTCHA
Why Writing a Blogging Engine is not an Absolute Waste of Time
Another One Bites the Blog-o-Sphere — Let's Do it with Style
Fix Apache's httpd.pid Conflict with Skype
Branding Presidential Candidates — the McCain and Obama Campaigns
Going Public with a New Layout
Putting Hyperlinks in a PDF Document with Adobe inDesign
Battle of the Bits 3.0 in the works thanks to FECES
Tutorial Run : Outer Space Text Effect
Making BotB's entry Table Better for Sorting
Shopify blog to Feedburner to Yahoo Pipes
Tutorial Run : 3D Glass (ice) Text Effect
Can we say goodbye to Internet Explorer 6 yet?
Made a List, Checked it Twice ;D/
Too Much White Background to Handle o___@
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/
posted by Langel
16 Comments
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.
gUitlesit
Who believes this? http://www.google.com/search?q=2012
posted on Wednesday, September 14th 2011 1:42am
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
The Latest Trading Software for Sale! All Software In The List (More Than 6000 Titles Or 40 Dvds)!Just For 300$! Our online store:http://tradersdvd.co.cc For additional questions send to us a message:yourtrader3000@gmail.com;yourtrader2008@gmail.com;yourtrader2006@yahoo.com The Latest Trading Software for Sale! All Software In The List (More Than 6000 Titles Or 40 Dvds)!Just For 300$! Our online store:http://tradersdvd.co.cc For additional questions send to us a message:yourtrader3000@gmail.com;yourtrader2008@gmail.com;yourtrader2008@gmail.com! Visit our online store <a href=http://tradersdvd.co.cc>Golden Traders' Software Collection</a>.
posted on Monday, January 30th 2012 12:26am
I LOVE YOU! i have been fighting with this for weeks...i appreciate you sharing this so much!
posted on Saturday, February 4th 2012 11:38am
Nadeem
very nice demo, appreciate your work..thank you
posted on Wednesday, February 22nd 2012 7:16amThe Latest Trading Software for Sale! All Software In The List (More Than 6000 Titles Or 40 Dvds)!Just For 300$! Our online store:http://www.tradersdvd.co.cc For additional questions send to us a message:yourtrader3000@gmail.com;yourtrader2008@gmail.com;yourtrader2006@yahoo.com The Latest Trading Software for Sale! All Software In The List (More Than 6000 Titles Or 40 Dvds)!Just For 300$! Our online store:http://www.tradersdvd.co.cc For additional questions send to us a message:yourtrader3000@gmail.com;yourtrader2008@gmail.com;yourtrader2008@gmail.com! Visit our online store Our Blog <a href=http://www.wininvest.co.cc>; Golden Traders' Software Collection</a>.
posted on Saturday, February 25th 2012 5:57pm
Sergio
"It is important, however, to concern ourselves with such elusive browser dinosaurs still roaming the internets. "
Omg dude u made me laugh so hard. Nice work :)
<a href=http://diablo-3-for-free.com/>Free Diablo III</a>
posted on Wednesday, May 9th 2012 7:34am
sJKyvUAF <a href=http://www.saclongchamp2012pascher.com>Longchamp Pas Cher</a> vlOcMaPgrPUoq
posted on Tuesday, July 24th 2012 1:50am
UKFAzNxOspKC <a href=http://www.truereligion-outletstore.net/>true religion sneakers</a> nicYrXyyQulmGnF <a href=http://www.truereligion-outletstore.net/>cheap true religion</a> rhjwreHwARaiucAi <a href=http://www.truereligion-outletstore.net/#42765>true religion bobby super t</a> WYqhJPMLOY http://www.truereligion-outletstore.net/#77759 opdbvYLqCMCxbZbjyTB
posted on Tuesday, July 24th 2012 6:55am
space-shop.org отличный магазин!
MissioncizLob
h9j0q, <a href=http://www.archdesignuganda.com/docs_en/content/projects/petroleum_installations/cymbalta.php?cymbalta-used-for-pain>cymbalta used for pain</a> ,x3i2a
f5k5q, <a href=http://www.archdesignuganda.com/docs_en/content/projects/petroleum_installations/cymbalta.php?cymbalta-withdrawal-after-one-dose>cymbalta withdrawal after one dose</a> ,p8j7a
w7u4m, <a href=http://www.archdesignuganda.com/docs_en/content/projects/petroleum_installations/cymbalta.php?cymbalta-and-weight-gain-cymbalta-and-alcohol>cymbalta and weight gain cymbalta and alcohol</a> ,b2p4p
v1s7c, <a href=http://www.archdesignuganda.com/docs_en/content/projects/petroleum_installations/cymbalta.php?cymbalta-capsulas-30mg>cymbalta capsulas 30mg</a> n1f8u,
dx 6490 kodak miracle balls subwoofer and amp house blueprint program jeff adams dvd amp newsweek subscription rdr gx7 sony <a href=http://www.chaneljpsalemall.com/>;シャネル ショルダーバッグ</a>
reciprocating pressor pda cases chest type freezer lacie 120 zeroagent <a href=http://www.louboutinjpredsoleshoes.com/>ルブタン</a>;
retire pc buys soundmatters fullstage hd s2200 under $5 adjustable razor sdades niagara falls map take bake pizza punch master landscape home design <a href=http://www.louboutinjpredsoleshoes.com/>;クリスチャンルブタン 靴</a>
nightwing adober flowers and gifts merry makers rules engine java polar heart rate monitors stralia samsung 7178 venture parts
Leave a Comment
ThemeDIgital
hehe, obvious way of dealing with 2 bgs :)
posted on Friday, July 3rd 2009 1:14amAlthough 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!