Background colours and pictures

Standard HTML lets you set a background colour and picture for a page using the <body> tag and for text in a table using the <table> tag. But that’s about your lot.

All this changes with the background style properties. You can now use the background-color property to set a background colour for any tag. You can put colour behind a paragraph, a phrase, a word or even a letter if you like.

Similarly, you can use the background-image property to put a picture behind any tag, a paragraph, a list, or even just a word or phrase.

If you do add a picture, there are several properties that you can use to tell the browser how to the display it. You can position a background picture, repeat it, and decide whether it should be fixed or scroll with the document.

Use background-position to set initial position of a background picture relative to the tag by specifying horizontal and vertical offsets
Use background-attachment to specify whether the background picture is fixed on the page or scrolls with content
Use background-repeat to control if, or how, a background picture tiles. The browser tiles a picture if it is too small to fill the entire area. The picture repeats over and over to fill the area. You can choose not to have the picture tile, or you can tile the picture vertically, horizontally or in both directions