CSS can also be used to place images in the background of any element. The property to do so is called, not surprisingly, background-image
:
body { background-image: url(‘images/gradient.gif’); }
We cannot use src
in the property value – that is an HTML attribute value, not a CSS property, and one reserved for use with the <img>
tag. Nor can we use href
or a link
tag, for similar reasons. But once you are past the url
prefix, the parentheses and the single quotes (or double quotes, or no quotes at all – any be used, so long as they are used consistently), the path to the image in the background-image
property value is the same as if you were inserting an image directly on a page.
An image can be placed in the background of any element. That being said, <body>
is the most commonly used, so it will be used as the selectora> in this article.
Images used for backgrounds should usually be processed to lower their contrast or opacity, compressed to reduce file size and edited to create seamless integration if they repeat.
By default a background image will tesselate both horizontally and vertically through the space used by the element. To change that, alter the value of the background-repeat
property:
body {
background-image: url('images/watermark.png');
background-color: #faf;
background-repeat: no-repeat;
}
Alternatively, and more efficiently, this could be written in a single line:
body {
background: url('images/watermark.png') #faf no-repeat;
}
Note the specification of a background-color
alongside the background-color
. While in most cases this color will never be seen (being covered by the image), it's still very important to set it: otherwise, your entire design relies on the expectation that the background image will always load. You should never make this assumption. By set the background color to reasonable mid-tonality of the image, content on top of either will still be readable, even if the image fails to load.
background-repeat
can also take values of repeat-x
(to tile horizontally) and repeat-y
(to create vertical tiling of the background image).
You can also position the background image in reference to your element. Note that the numerical origin of this position is the top left corner of the element’s box.
background-position: 20em 10px;
The position values are always horizontal position followed by vertical position, separated by a space, unless the single keyword center
is used (note the spelling). For the example above, the background-image
would be 20em
from the left side of the body and 10px
from the top. The numerical position may be measured in any CSS unit, including negative values.
background-position
may also take keyword values: top, center and bottom for the vertical component, and left, center and right for the horizontal. background-position
is left top by default. If you wish to have a background image in the center of the element, you can just use:
background-position: center;
body height quirk
You may find that web pages with relatively sparse content do not seem to place background images in the center of the browser window when background-position: center
is used for a background image in the body, or repeat tiled images correctly. That’s because browsers obtain the vertical height of the body from the content of the page, not from the height of the browser window. To get around this problem, make a declaration for body
using vh
units:
body { min-height: 100vh; }
By default the background image will move with the rest of the content as the user scrolls the web page up and down. If you want to change this, set the background-attachment
property to fixed
.
CSS has added many other properties and possibilities for background images, including multiple images and resizing.
Photograph by Rob Schofield used under a Creative Commons license
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.