Using two page backgrounds

December 16. 2004 13:45 9 comments Category: tips | design

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.

Post RSS Tags: html page backgrounds

Example pageThe description is used as meta description
My first ASP.NET(2.0) web pageI decided it was time for me to learn a new language. Para el espaÃ±ol, presione el n...
ASP.NET tip: output the 'last saved' CSS fileHere's a little trick for any ASP.NET coders out there... Problem: I've got a site wher...

Comments

10/6/2007 7:18:46 AM

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.

Bryan Peters

10/6/2007 7:18:46 AM

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!

Carl

10/6/2007 7:18:46 AM

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)

Anonymous

10/6/2007 7:18:46 AM

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)

Anonymous

10/6/2007 7:18:46 AM

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

Bryan Peters

7/21/2008 2:34:08 AM

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!

Vlaks

4/22/2009 4:22:00 AM

simple and easy! but it does not work for IE6.
maybe need to use png fix script for PNG shadows?

thanks

psd to html

9/23/2009 8:05:19 AM

heres the thing, the html works, but it doesn't stay fixed to the page.
so when i scrolled down, it goes up.
how can i make it stay fixed. cause i really want to overlay my backgrounds, but i want both of the backgrounds to stay fixed, so that it won't scroll together.
and is it any way to put the background somewhere other than top right left or bottom?

thankyou very much. i've been looking for this soo long.

appreciate it.

fasya