Backgrounds
« Previous: Typography | Next: Pseudo-class selectors »
CSS offers great flexibility in adding backgrounds to HTML elements: you can add background colours, background images, or both, not only to the page itself, but to any element within the page, using the following properties:
background-color
Defines a background colour for an element. While there are different ways of specifying colours, it’s probably easiest to stick with hex colours. For example:
body {
background-color: #fffaf4;
}
sets the background of the entire page to a light orange.
background-image
Background images can be added using the background-image property:
body {
background-image: url(../images/bgimage.jpg);
}
url() here defines the location of the image, which is specified within the brackets - this location can be absolute or relative in the same way as the value of the href attribute in HTML.
background-repeat
By default, the background image will repeat horizontally and vertically along the entire width and height of the element to create a tiling effect. You can change this using the background-repeat property. There are four possible values for this property:
- repeat - the image repeats horizontally and vertically; this is the default behaviour
- no-repeat - the image does not repeat
- repeat-x - the image repeats horizontally but not vertically
- repeat-y - the image repeats vertically but not horizontally
background-position
By default the image will be placed at the top left corner of the element. This can be changed using the background-position property. This can be defined using units such as pixels or percentages, or using keywords - left, right, top, bottom or center. The value of this property has two components: the first defines the horizontal position of the image, the second defines the vertical position.
For example:
body {
background-image: url(../images/bgimage.jpg);
background-repeat: no-repeat;
background-position: left center;
}
This places the image on the left edge, but halfway down the element;
you could also have background-position: 0 50%.
It’s okay to mix units, for example 15px 50% would place the image 15 pixels from the left and halfway down, but for some reason the w3c has decided, in its infinite wisdom, that keywords and units should not be mixed, ie 15px right is wrong.
Combining properties
Thankfully, it is possible to combine all of these different properties into one: the background property. With this property you can set a background colour and/or image, and set the tiling and position of the image. For example:
body {
background-color: #fffaf4;
background-image: url(../images/bgimage.jpg);
background-repeat: no-repeat;
background-position: left center;
}
can be shortened to:
body {
background: #fffaf4 url(../images/bgimage.jpg) left center no-repeat;
}
The values can be written in any order.