Title Block with a Shock

Now with any modern browser you can use the tags in the head as extra tags for display purposes—I'm salivating. But wait there's more, you can also use the body tag as an extra container element that resides within in the html tag.

Extra tags

In this example, I use the title tag as an extra tag set to insert the image that reads title. This is simple done by telling it to display: block; and using Image Replacement—No Span to insert the image.

head, title{ display: block; } title{ height: 0; padding-top: 69px; overflow: hidden; background-image: url(graphics/title.png); background-repeat: no-repeat; }

Body as a Container

By using the html tag to set the background for the document that frees up the body tag for other uses.

html{ background-color: #6999C5; padding: 0; margin: 0; } body{ padding: 0 20% 0 15%; margin: 0 10% 0 10%; border-color: #0D161F ; border-width: 0 2px 0 2px; border-style: solid; }

Compatibility

The extra tags works with Mozilla 1.4 and Opera 7.0. Using the body as a container works in Mozilla 1.4, Opera 7.0, and Windows Internet Explorer 6 with some problems.

More Information

CSS Destroy has similar example of pulling meta information from the head in Metadatum Cantabile.

Return to CSS Play.