DONT ADD ANYTHING HERE!

  1. The background-repeat CSS property sets how background images are repeated
  2. A background image can be repeated along the horizontal and vertical axes, or not repeated at all
  3. The property accepts two repeat-stylekeyterms, or one keyterm as a shorthand for the two values
  4. When two values are provided, the first value defines the horizontal repetition behavior and the second value defines the vertical behavior
  5. Property values can be used to repeat
    1. only horizonatally
    2. only vertically
    3. not at all
  6. The default value is repeat repeat
  7. With this value, the background image maintains its intrinsic aspect ratio, repeating both horizontally and vertically to cover the entire background paint area, with edge images being clipped to the size of the element
  8. Which edges clipped depends on the value of the background-position

Values

  1. repeat
  2. The default value
  3. The image is repeated as many times as needed to cover the entire background image painting area, with the edge image being clipped if the dimension of the painting area is not a multiple of the dimension of your background image
  4. no-repeat
    1. The image is not repeated (and hence the background image painting area will not necessarily be entirely covered)
    2. The position of the non-repeated background image is defined by the background-position CSS property
  5. space
  6. The image is repeated as much as possible without clipping
  7. The first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images
  8. The background-position property is ignored unless only one image can be displayed without clipping
  9. The only case where clipping happens using space is when there isn't enough room to display one image
  10. round
  11. As the allowed space increases in size, the repeated images will stretch (leaving no gaps) until there is room for another one to be added
  12. This is the only repeat-style value that can lead to the distortion of the background image's aspect ratio, which will occur if the aspect ratio of the background image differs from the aspect ratio of the background paint area
  13. repeat-x
    1. Shorthand for repeat no-repeat
    2. The background image repeats horizontally only, with the edge image being clipped if the width of the paint area is not a multiple of the background image's width
  14. repeat-y
    1. Shorthand for no-repeat repeat
    2. The background image repeats vertically only, with the edge image being clipped if the height of the paint area is not a multiple of the background image's height

Example

Greem Strip
Greem Strip

CSS (inferred)

background-repeat: repeat-x;

background-repeat: repeat-y;

background-repeat: no-repeat;

background-repeat: space;

background-repeat: round;

background-repeat: repeat repeat;

background-repeat: space repeat;

backgronund-repeat: space round;

background-repeat: round space; 

References