demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

CSS Background Images

css / backgrounds

Estimated reading time: 2 minutes, 54 seconds

can also be used to place images in the background of any element. The property to do so is background-image.

body { background-image: url(‘images/gradient.gif’); }

We cannot use src for this – that is an HTML attribute value, not a CSS property, and 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 – either may 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.

I wish to emphasise that an image can be placed in the background of any element. That being said, body is the most commonly used element for this technique, so we will continue with in our initial example.

We should also note that images that are to be used for backgrounds should be processed through to lower opacity, reduce file size and to create seamless integration between repetitions of the image.

By default an image used as a background image will tesselate both horizontally and vertically through the space used by theelement. If we want to change that, we alter the value of the background-repeat property:

body { background-image: url(‘images/gradient.gif’); background-repeat: no-repeat; }

background-repeat can also takes 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 always 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, our background-image would be 20em from the left side of the body and 10px from the top. Numerical position may be measured in any of the CSS units I have introduced you to, including mixtures of units, as shown in the example above, and may include 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 whenbackground-position: center is used for a background image in the body. That’s because Firefox and other compliant 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 separate declaration for body and html:

html, body { height: 100%; }

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.

background-image, like background-color, may be shortened to simply background, although this is not recommended for reasons of clarity.

CSS3 has added many new properties and possibilities for background images, including multiple background images and sizing the background.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.