Background - Postion

The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).

Background - Attachment

The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page):

Background - Size

The CSS background-size property allows you to specify the size of background images. The size can be specified in lengths, percentages, or by using one of the two keywords: contain or cover. The following example resizes a background image to much smaller than the original image

Background - Edge Offset Value

If you need to position a background-image in CSS 20px from the left and 10px from the top, that’s easy. You can do background-position: 20px 10px;.

Background - multiple stack order (location of color value)

Multiple background images is a cool feature of CSS3. The syntax is easy, you just comma separate them. I find it’s easiest/best to use the background shorthand property so you can declare the position and repeating and whatnot and keep them all grouped together. What isn’t obvious while looking at the syntax is which image is on top in the vertical stacking order when those images overlap. The spec is clear in this regard and browser implementations follow. The first is on top and they go down from there.

Summary

CSS background properties are used to define the background effects for the elements. These propertites include 'color', 'image', 'repeat', 'attachment', 'position', and 'size'. These properties can be used individually or combined in a single 'background' property.