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.
