2R - CSS Background Properties

Background-position

The background-position property sets the initial position for each background image. The position is relative to the position layer set by 'background-origin'.

Background-attachment

The background-attachment property sets whether a background image has a fixed position within the viewport, or if it scrolls with the block it's contained in.

Background-size

The background-size property sets the size of the element's background image. It can be set to contain, a percentage, cover, or a width and height.

Edge Offset Value

These keyword values (top, left, bottom, right) specify the edge against which to place the item. A length or percentage can then be used to position the item relative to the container.

Multiple Stack Order

This syntax can be used to stack multiple background images, with the lowest item in the background rendered first, and the top item rendered last. For this reason, a color should be listed as the bottom-most property.

Summary

CSS contains a number of useful tools to customize the background of an element. It is important to remember the order in which backgrounds are added will impact the order in which they are rendered.