Making Use of the HTML Tag
Wednesday 18th March 2009
When converting a design to a fully functioning html website, one of the aspects of design that can often be troublesome is the page background. Since you neither know the height that any given page will be, nor the width of your users viewport, you always need to ensure that your beautifully complex background image either fades into a solid colour, or is tileable. The background attributes, such as background-color and background-repeat, come in handy for this. The vast majority of times, the
body tag will be sufficient to cover this, but there are situations in which it isn't enough. Two such examples include top banners with fading backgrounds, and short footers. When presented with these problems, I found that the
html tag (probably the most under used in CSS) can come in handy, without causing any issues with browser support.
Top Banners and Vertical Fading Backgrounds.
Suppose you have a fixed with website, and the design calls for a "header" banner to stretch the width of the viewport. This is usually an easy fix, by taking a sample of the background and tiling it across the page. Throw in a vertical gradient background in the mix and it's more or less the same, you just have to include the gradient down to where it becomes the solid, background colour. But if you need this gradient to fade in and out as the page goes down, that's where things get a little complicated. One (inefficient and a little bit cheap) solution is to create a large image, which is long enough to cover all possible page heights. The problem with this is that there is no way to completely determine your pages height, and so the system could break, and somewhere down the page leave it with a bit of a background eyesore. My solution is to use the
html tag, by giving it some CSS. It's not widely known that you can apply the same styling to the
html tag as any other object in the DOM using CSS, and to be honest it's not really ever needed, as your
body tag covers the entire viewport 99.9% of the time. Back to the problem at hand, and the solution is actually quite simple. Just slice your background image in the following way:
Take your gradient, and if needs be flip it over on itself, so that it starts at the same position as it ends (this way it can seamlessly be tiled vertically.) Take a 1px wide slice of this, which will be used as your html background image, with the background-repeat attribute set to repeat (this will tile it on both axis'). Now slice your "top banner" (1px wide and tile horizontally), and use this as your body background image, with a transparent background. It's worth noting at this point that you should specify a background color for your html with sufficient contrast to your text, in case images are turned off by your user. And that's it, your page background will tile both horizontally and vertically for as long as required. View the example for this: html background tiling.
Working with a fixed width layout can also cause problems with your footer area. If you want to have a footer background span across the width of the viewport, you may have to take it out of your fixed width (and even use an additional wrapper div... ugh!). By not specifying a width for your footer section and tiling it's background horizontally you can achieve the effect of a footer banner across the bottom of your site. Whilst this alone will work for most of the pages on your site, there may be some circumstances where the content of a page won't fill the viewport, that is to say that the body of your page doesn't extend to the bottom of the screen. Not having the footer at the "bottom" of the screen resulted in the famous "sticky footer" problem, to which there are a number of acceptable solutions.
The problem that I want to address here though, is that by having a page that isn't as tall as your screen, the area below your footer will be a different colour to the footer background. Because you will have set the body colour to something else, the browser will revert to that colour once the footer ends. The solution? Just apply the same background colour to your html element in the css. This will override the body background from the moment the footer ends. View the example code for this: html footer extension.