DONT ADD ANYTHING HERE!

  1. The background-size CSS property sets the size of the element's background image
  2. The image can be
    1. left to its natural size
    2. stretched
    3. constrained to fit the available space
  3. Spaces not covered by a background image are filled with the background-color property, and the background color will be visible behind background images that have transparency/translucency
  4. The background-size property is specified in one of the following ways
    1. Using the keyword values contain or cover
    2. Using a width value only, in which case the height defaults to auto
    3. Using both a width and a height value, in which case the first sets the width and the second sets the height
    4. Each value can be a length, a percentage, or auto
  5. To specify the size of multiple background images, separate the value for each one with a comma

Values

  1. contain
    1. Scales the image as large as possible within its container without cropping or stretching the image
    2. If the container is larger than the image, this will result in image tiling, unless the background-repeat property is set to no-repeat
  2. cover
    1. Scales the image (while preserving its ratio) to the smallest possible size to fill the container
    2. That is: both its height and width completely cover the container, leaving no empty space
    3. If the proportions of the background differ from the element, the image is cropped either vertically or horizontally
  3. auto
    1. Scales the background image in the corresponding direction such that its intrinsic proportions are maintained
  4. length
    1. Stretches the image in the corresponding dimension to the specified length
    2. Negative values are not allowed
  5. percentage
    1. Stretches the image in the corresponding dimension to the specified percentage of the background positioning area
    2. The background positioning area is determined by the value of background-origin (by default, the padding box)
    3. However, if the background's background-attachment value is fixed, the positioning area is instead the entire viewport
    4. Negative values are not allowed

Intrinsic Dimensions and Proportions

The computation of values depends on the image's
  1. intrinsic dimensions (width and height)
  2. intrinsic proportions (width-to-height ratio)
These attributes are as follows:
  1. A bitmap image (such as JPG) always has intrinsic dimensions and proportions
  2. A vector image (such as SVG) does not necessarily have intrinsic dimensions
    1. If it has both horizontal and vertical intrinsic dimensions, it also has intrinsic proportions
    2. If it has no dimensions or only one dimension, it may or may not have proportions
  3. CSS gradients have no intrinsic dimensions or intrinsic proportions

Example

Example 2 (Contain)

Example 3 (Cover)

Example 4 (33%)

References

MDN: background-size