CSS Background Properties and Values

Background-position

This property determines where a background image will be placed in an element. The values to define location are top, bottom, left, right and center. The right and left values position on the x axis, while top and bottom position on the y axis. Center will center the image in the element. A x and y value may be specified. However, if only one is specified the second value will default to center. The distance from the specified edge is defined with a length or percentage value.

Background-attachment

This property further defines a background image position. The values are fixed, scroll and local. Fixed: the background does not move in the viewport. Scroll: the background does not move in the element it is in but the contents move (scroll). Local: The background in the element and its contents move (scroll) together.

Background-size

A background image can be left in its original size or resized. The value can be set as the desired width of the image with its height automatically adjusted so its proportions are correct. Other values for this property are contain and cover. Cover: will size the image to fill the area. This will leave no empty space but the image may be cropped if too large in one of the directions. Contain: will make the image large but without any cropping or stretching of the image. However, depending on the size the image may appear more than once.

Another property commonly used in conjunction with background-size is background-repeat. If the image is smaller than its container, the image will be repeated until the area if filled (tiling). The values for background-repeat are repeat, no-repeat, repeat-x and repeat-y. It seems that the properties of background-position, background-size and background-repeat work together to place an image in just the right spot.

Background-edge offset value

The edge offset value is specified in the background-position property. It defines how far and from what edge of the element it is in it is placed. It combines the position and length values. An example of how it could be written would be background-position: top 20px left 30px; .

Background-multiple stack order

On the MDN site, this seemed to be called Canonical order which "refers to the order in which separate values need to be specified"1 when given as a single value. The order was defined as:

  1. background-image
  2. background-position
  3. background-size
  4. background-repeat
  5. background-attachment
  6. background-origin
  7. background-clip
  8. background-color

It is noted that the color value is last!

Multiple Background Images

If multiple images are used in an element, they are listed separated by commas with the first listed being the "top" image and the last listed being on the "bottom". If a gradient is used, it is always the last or "bottom" image. In a property, the values for each image are given separated by commas in the order that the images are listed.

Documentation

To research this topic I revisited the textbook from the web-coding class, Basics of Web Design. I also visited the w3.org website and made extensive use of the developer.mozilla.org website.