CSS Background Properties

Background - Position

The default position of a background image is the top-left corner of an element, and repeated vertically and horizontally. The background property of "position" sets the starting position of a background image to the value specified by that value. If only one value is specified, the other value will be center. The first value is the horizontal position and the second is vertical.

Background - Attachment

The background property of "attached" is used to set the scrolling behavior of an image. The default value is "scroll", where the image will scoll with the page. There is also the value of "fixed" where the image will not scroll with the page. The value of "local" sets the image to scroll with the element's contents.

Background - Size

The background "size" property sets the size of a background image. The background can be left to it's natural size or it can be set to fit the available space using this property. The background size property can be specified using keywords like "contain", "cover", or "auto"

Background - Edge Offset Value

The background "edge offset" values are amounts added to the keyword positions chosen for an image within a container. These values are used in conjunction with the "background-position property. The edge offset values are given in measurements like "em" or "px".

Background - Multiple Stack Order
(Location of color value)

The multiple stack order refers to the order which images are stacked in the browser. The stacking order of multiple backgrounds is the first one listed, is on the top.

The location of the color value where there are multiple stacks are to place the value at the end of an item, separated by a comma.

Summary of the Documentation

There are many variations and layers that can be contained in the background of a webpage. This can make for a really interesting and appealing web experience. With all these easy to use background properties available, web designers are given more control and creative power over the image elements that are going into their websites.