How a background image will be repeated.
Syntax
background-repeat: horizontal_repeat_type [vertical_repeat_type] ;
repeat_types:
repeat - The background image will be repeated both vertically and horizontally. (default)
repeat-x - The background image will be repeated only horizontally.
repeat-y - The background image will be repeated only vertically.
no-repeat - The background-image will not be repeated.
space - Space the image out evenly across the width and height of the element. (CSS 3 only)
round - Scale the image until it can repeat throughout the element without being cut off. (CSS 3 only)
inherit - Inherit from the parent element.
If only one of the repeat options above is specified it will apply to both horizontal and vertical tiling of the image.
You can specify multiple background images and you can (optionally) specify the background-repeat for multiple images as a comma-separated list, these will then be applied (in order) to each of the images specified by background-image.
In the demo below try resizing the result box vertically and horizontally to see how the 'round' option will add additional images only as required to fill the space, with no cropping. Changing to 'space' gives a similar effect but avoids any distortion/stretching of the image.
Examples:
H1 {
background-repeat: round; }
#emw3id
{
background-repeat: space round;
}
Try it:
(CSS 1) Browser Support: All major browsers. The two new values in CSS 3 have limited support: IE9 + Opera 10.5
“The ear tends to be lazy, craves the familiar and is shocked by the unexpected; the eye, on the other hand, tends to be impatient, craves the novel and is bored by repetition” ~ W. H. Auden
Related:
Background-repeat - MDN Web Docs.
Background-Attachment - Position of a background image relative to the page.
Background-Color - The background color of an element.
Background-Image - The background image for an element.
Background-Position - Starting position of a background image.
background - A shorthand for the background properties.