Any element including the Web page body itself can have a background colour or image. You have already learned how to set the background colour.
To use a background image you add this to the styles for the element concerned:
body {
background-image:url('texture.png');
background-repeat:repeat;
background-position:left top;
}
This image will repeat to fill the page with repeated copies to give a background texture. Alternatively, you can choose:
- no-repeat - perhaps to show a single large image as background
- repeat-x to repeat across the page
- repeat-y to repeat down the page
The start position is not required but can be any combination of:
- left
- center
- right
and:
- top
- center
- bottom
Bear in mind the the cleverer effects using background images are normally done with multiple DIVs containing parts of the image or different images because the current version of CSS only supports one, fixed size image. It looks like that will change in the next version.
