. This is my blog, where I talk about web design and development with 
Pro CSS3 Animation, Apress, 2013CSS 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 PhotoShop 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.
