Styling the HTML Tag

Posted on Jan 11, 2011

Apparently, it’s possible to apply a CSS background both the body tag AND the html tag in order to create some interesting layering effects. And it works in Firefox, Chrome and IE 6-8. Probably more, but that’s All I’ve tested it in. Why would you want to do this? I’ll show you three examples where this can come in handy.

Use the html tag for a repeating page background and the body tag for a top-only background, such as a gradient
Use it with the body-width technique to create page margins
Use it along with the 3D Javascript Effect to create another moving background image without an extra tag

1. Gradient Plus Repeating Background

Demo

This could also be done with CSS3’s multiple backgrounds, but this method is cross-browser (even works in IE6).

html {
  background:url(html-bg.jpg);
}
body {
  margin:0;
  background:url(body-bg.png) repeat-x;
}

2. With Body Width

Demo

html {
  background:url(html-bg.jpg) top left fixed;
}
body {
  width:960px;
  margin:auto;
  padding:10px;
  background:#fff;
}

3. With 3D Javascript Effect

Demo

html {
  background:url(html-bg.jpg) top left fixed;
}
body {
  margin:0;
  background:url(body-bg.png) top left;
}

This technique can be used almost any time you would normally add an extra wrapper element around the page simply for styling purposes.