10.1 Background Images
With CSS we can apply images to the background of elements from within the stylesheet rather than inside the HTML document. Most elements can have one background image applied, but only one. CSS provides some useful properties:
| Property | Purpose |
|---|---|
| background-image | Specifies the image path, name and filetype to be used |
| background-repeat | Defines whether the image is to be repeated and how |
| background-attachment | Specifies if the image is to scroll or not |
| background-position | Specifies the positioning of the image |
| background | Compiles all the above properties |
Background Image
The background-image property can be used to insert background images to elements. For example:
body {background-image: url("images/flowers.gif");}
The location, name and filetype of the image is given by the value: url("images/flowers.gif"). In this example the images would be repeated horizontally and vertically to fill the entire screen because this is the default setting of the next property.
Background Repeat
The background-repeat property can be used to specify how an image is to be repeated, if at all. There are 4 settings available for this property:
| Value | Result |
|---|---|
| background-repeat: repeat | Image is repeated horizontally and vertically (default setting); |
| background-repeat: repeat-x | Image is repeated (tiled) horizontally; |
| background-repeat: repeat-y | Image is repeated vertically; |
| background-repeat: no-repeat | Image is not repeated. |
For example, to repeat the image horizontally only, such as in a banner or header:
body {background-image:url("images/flowers.gif"); background-repeat: repeat-x;}
Background Attachment
In addition, the background-attachement property specifies whether a background image is fixed or scrolls along with the containing element. There are two settings available for this:
| Value | Result |
|---|---|
| Background-attachment: scroll | Image scrolls with page (unlocked) |
| Background-attachment: fixed | Image is locked |
In the following example the flower image would scroll with the user:
body {background-color: #ffcc66; background-image: url("images/flowers.gif"); background-repeat: no-repeat; background-attachment: fixed;}
Background Position
By default, a background image will be positioned in the top left corner of the screen but the background-position property allows this to changed by specifying coordinates in fixed units (pixels, cm etc.), as percentages of the browser window, or using words such as top, bottom, center, left and right. For example:
| Value Example | Result |
|---|---|
| background-position: 2cm 2cm | Positions image 2 cm from the left and 2 cm down the page |
| background-position: 50% 25% | Positions image centrally and one fourth down the page |
| background-position: top right | Positions image in the top-right corner of the page |
The example below positions the background image in the bottom right corner:
body {background-color: #FFCC66; background-image: url("images/flowers.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom;}
Background
The above properties can be compiled using the background property, making the style sheet simpler and shorter. The list order is: background-color; background-image; background-repeat; background-attachment; and background-position. If a property is left out its default value will be assumed by browsers. For example:
body {background-color: #FFCC66; background-image: url("images/flowers.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom;}
Can be compiled into:
body {background: #FFCC66 url("images/flowers.gif") no-repeat fixed right bottom;}
The background-color property is included in the compiled background property because sometimes a background image is used in conjunction with a co-ordinating background colour.
A common technique is to apply a background image to the <body> tag. And unless it is a detailed image or scene, it can often be nothing more than a thin (even just one pixel high / deep) image that is then tiled (repeated) across or down the page using CSS. For example, take a look at this site. The white page sits on a darker background with side shadows. This is accomplished using a 990px wide by 1px deep image called background.png and the following CSS:
body {background:url("images/background.png") #e9e8de repeat-y center;}
The background property loads in the imade, the value "center" ensures it is placed in the center of the page, and "repeat-y" repeats the image down the entire page. As for the image itself, it was made very simply in Adobe Photoshop using a simple colour and then applying a shadow using the gradient tool.
Background images can be used in a similar way for container divs, headings, text, list items, links, etc.