Using two page backgrounds

I had a happy accident this week. I accidentally applied a CSS background to HTML (instead of BODY). Guess what? It worked the same as the typical BODY background configuration that everyone uses. So I thought, what would happen if I applied a background to both HTML and BODY? Check out the results...

The difference between HTML and BODY: When setting both an HTML and BODY background, the HTML applies to the entire browser window, but BODY only applies to the content within the BODY tags.

Example 1: Vertical Overlay

Uses a horizontal background with an overlaying PNG vertical shadow. Similar to JeffCroft.com and SimpleBits.com.

I'm using HTML>BODY on the PNG because IE can't handle Alpha Transparencies. An IE user won't see the vertical drop shadows on the sides of the middle column. I'm using this technique on this site.

Example 2: Horizontal Overlay

Has a vertical centered background with an overlaying horizontal PNG shadow at the top of the page. This is helpful if you need to have a column that appears to have 100% height.

I'm using HTML>BODY on the PNG because IE can't handle Alpha Transparencies.

Example 3: P-Diddy (Stylish Wrapper)

This was the fun one. For the sake of time (and lack of design skills), I'm using a background image from FrozenToast.com. This works on all modern browsers, and can be useful if you need a stylish liquid layout with minimal amount of code. I added padding to the BODY, so it'll push the content in and expose the two backgrounds.

If you find any of this useful or notice anything funky with my writeup, leave a comment.

Currently rated 5.0 by 2 people

Currently 5/5 Stars.
1
2
3
4
5

Sharepoint Designer 2007 web cache issue [fix]Design is knowing when to stopMy first ASP.NET(2.0) web page

6 Comments

Anonymous October 6. 2007 07:18

Pretty sweet! Unfortantley, it would seem your examples aren't working (I'm geting 404s), but the concepts are great. I'm using an extra DIV for my shadow, but it makes a lot more sense to hook it to the body tag...

Nice work!

Jeff Croft
(Who doesn't have a Blogger account)

Bryan Peters October 6. 2007 07:18

I've been having problems with Windows Server 2003 ever since I installed SP1 [beta] on it. I also have the .NET 2.0 [beta] Framework on this server also. Maybe I shouldn't be testing beta platforms on a production server. Der!

The pages are working again (until the next time I screw up the server).

Anonymous October 6. 2007 07:18

Remember that this won't work under IE5/Win, since it doesn't understand <html> being the root element no matter what DOCTYPE you have on your page.

--Vinnie Garcia
(who also doesn't have a blogger account)

Bryan Peters October 6. 2007 07:18

True, I noticed when testing this that IE 5 has issues with this technique. If you want your site to work with an older browser, you pretty much have to add presentation code (an extra wrapping div) to your page structure. But in the first two examples, I'm using an overlaying PNG, which IE can't handle anyways.

Carl October 6. 2007 07:18

This is AWESOME. I could have totally used this on a site I was working on last May. I wanted to apply two backgrounds and could not figure out how to get it to work. Thanks!

Vlaks July 21. 2008 02:34

Fantastic concept, I have been searching high and low for a solution and here it seams to be!

So I tested it in Netscape 9, Opera 9, Safari (Leopard & Tiger), Flock 1.2, Mozilla Firefox 3, and off course IE 7 and 8.

It is when I went to test it in IE 6, that my problem became apparent, It displays the top of the two horizontal images but not the bottom...

PLEASE can you maybe help me? do not know what I am doing wrong and cannot cure this problem, I have attached the code below for you to see and maybe help if possible.

html {
background:#0085BE url(../images/bkg_top.jpg) repeat-x top left;
}

html>body {
background:url(../images/bkg_bottom.gif) repeat-x bottom center !important;
}

body {
margin: 0;
padding: 0;
}

.container {
position:relative;
top:0px;
left:0px;
width:758px;
height:auto;
margin: 0 auto;
overflow:hidden;
}

Thank you in advance!

Add comment

Name*
E-mail* (Will show your Gravatar icon)
Website
Country Country flag

Comment* [b][/b] - [i][/i] - [u][/u]- [quote][/quote]

Notify me when new comments are added

UrbanDude