background-repeat#

#Introduction

The background-repeat CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.

#Examples

css-apisrc/background-repeat/App.tsx

Preview

#Syntax

background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

#Values

• Default value repeat
  The image is repeated as much as needed to cover the whole background image painting area. The last image will be clipped if it doesn't fit.

• no-repeat
  The image is not repeated (and hence the background image painting area will not necessarily be entirely covered). The position of the non-repeated background image is defined by background-position(./background-position).

• repeat-x
  Repeat along x-axis.

• repeat-y
  Repeat along y-axis.

• space
  The image is repeated as much as possible without clipping. The first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images. And background-position(./background-position) is ignored.

• round
  As the allowed space increases in size, the repeated images will stretch (leaving no gaps) until there is room (space left >= half of the image width) for another one to be added.

#Formal definition

#Formal Syntax

<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}

### Difference between web

• Not support inherit

#Compatibility

LCD tables only load in the browser