Shaded-edged css

This page should have a shaded left and right edge. However, the HTML is nothing special, in fact its about as basic as HTML gets. There are no nested divs or spans.

How it works

The usual means of applying a background to a web page is to attach it to the BODY element. This means you can use a single background image and colour.

However, modern browsers (IE6, Mozilla/Firefox at least) allow the application of styles to the HTML element of the page, as well as to the BODY element. This is the method that this page uses. There is one colour (#FFFFFF) and one background image attached to the HTML element (the shaded left image), and just a background image attached to the BODY element (the right shaded image). Add some padding to the body to make sure the text isn't running over the shaded area, and away you go.

	html {
		background: #FFFFFF url('left.png') repeat-y left;
		margin: 0;
		padding: 0;
	}
	
	body {
		background: url('right.png') repeat-y right;
		padding-top: 0;
		padding-bottom: 0;
		padding-right: 120px;
		padding-left: 120px;
		margin: 0;
	}

There are a couple of problems with using this method, which are related to the CSS standard. The standard states that if no background is provided for the HTML element, it will inherit it from the BODY element. There is a good reason for this. The HTML element essentially represents the "canvas", i.e. the viewable area of the browser window. The BODY, on the other hand, only extends down far enough to cover its contents. By using the BODY element's background on the HTML element, you are ensured the behaviour from older browsers continues - that is BODY backgrounds will cover the entire canvas, not just the BODY contents.

So what happens when there is a background attached to both the HTML and BODY elements? The HTML element will no longer borrow the background of BODY element, and the background on the BODY element will cut off as soon as it runs out of content.

To solve this, we need to make sure the BODY covers the whole canvas at all times. This is easily done with height: 100%

	body {
		background: url('right.png') repeat-y right;		
		padding-top: 0;
		padding-bottom: 0;
		padding-right: 120px;
		padding-left: 120px;
		margin: 0;
		height: 100%;
	}

However, its not quite right. In Firefox, you get a weird margins at the top, and the body background cuts off after scrolling down one screen height. This makes sense according to the CSS standard too. IE doesn't care and will just scale the height of the BODY. One way around this is to use min-height but that doesn't work in IE (except in table cells, oddly enough). You could get around this using one of the many "hide from IE" hacks, but I hate looking at those hacks, so I didn't go there!

There is another solution though. If you move the scrolling behaviour from the HTML element to the BODY element, everything just falls nicely into place.

	html {
		background: #FFFFFF url('left.png') repeat-y left;
		margin: 0;
		padding: 0;
		height: 100%;
		width: 100%;
		overflow: hidden;
	}
	
	body {
		background: url('right.png') repeat-y right;
		padding-top: 0;
		padding-bottom: 0;
		padding-right: 120px;
		padding-left: 120px;
		margin: 0;
		height: 100%;
		overflow: auto;
	}

The overflow: hidden on the HTML element means that it won't show scroll bars, ever. The overflow: auto on the BODY, however, means that if its content gets too big, then it will get scroll bars. These bars are indistinguishable from the standard HTML scroll bars, so the effect is complete.

I've also applied a width and a height to the HTML element, to make sure that it fills the whole canvas.

This has been tested in Firefox and IE6. I have no idea whether it will work in other browsers (it should work in Safari/Konqueror though)

Weird stuff

Make sure your BODY element has 0 padding top and bottom, otherwise the height: 100% will push the bottom scroll button off the screen.

Also, see the alternate version to see what happens when you have an obviously repeating background