CSS Background Properties

Background-position

When positioning images in a background, the values are always set in x then y. The background-position property sets where the starting position of the image is. The default position of a background image is top left and it is repeated both horizontally and vertically.

Background-attachment

The background attachment property sets whether an image will scroll or is fixed with a page. The value that sets an image not to scroll is fixed.

Background-size

The size of a background image can be set in the declaration itself. To do this, after linking the image, setting repeat value, position values, and offset values, you would add a forward slash and then set the width then height values.

Background-edge offset value

The background off set values are used to make minor adjustments to the position of an image. The off set values are noted after the verticle and horizontal positions. These values move the image the indicated value away from the edge.

Background-multiple stack order (location of color value)

The multiple stack order for a background image is first on top, last on bottom. The color must always be listed last as the browser will paint the background fist.

Summary

All of the properties listed above are intended on setting the appearance of an image in the background. A background may be coded as such: ur l( images/example.png) no-repeat top 10px right 15 px / 50px 75 px; This would be the image example located at the top right of a background with no repeat, in a fixed position that is off set from the top 10 px and the right 15 px with a width of 50 px and a height of 75 px.

Web Graphic Design Home