background#

#Introduction

The background shorthand CSS property sets all background style properties at once, such as background-clip,background-color,background-image,background-origin,background-position,background-repeat,background-size.

#Examples

css-apisrc/background/App.tsx

Preview

#Syntax

/* Using a <background-color> */
background: green;

/* Using a <bg-image> and <repeat-style> */
background: url('test.jpg') repeat-y;

/* Using a <box> and <background-color> */
background: border-box red;

/* A single image, centered and scaled */
background: no-repeat center / 80% url('../img/image.png');

The background property is specified as one or more background layers, separated by commas.

The syntax of each layer is as follows:

• <bg-image>
• <position>
• <bg-size>
• <repeat-style>
• The <bg-size> value may only be included immediately after <position>, separated with the '/' character, like this: "center/80%".
• The <box> value may be included zero, one, or two times. If included once, it sets both background-origin and background-clip. If it is included twice, the first occurrence sets background-origin, and the second sets background-clip.

The background-color value may only be included in the last layer specified.

#Values

#<box>

See background-clip and background-origin

#<background-color>

See background-color

#<bg-image>

See background-image

#<position>

See background-position

#<repeat-style>

See background-repeat

#<bg-size>

See background-size

#Note

• The background-color must be written in the last image, otherwise the parser will consider it an invalid background. For example: background: red url('./a.png'), url('./b.png);' will be ignored as an error. The correct way to write it should be: background: url('./a.png'),red url('./b.png);

#Formal definition

#Formal Syntax

[ <bg-layer> , ]* <final-bg-layer>

where

<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <box> || <box>
<final-bg-layer> = <'background-color'> || <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>

where

<bg-image> = none | <image>
<bg-position> = [ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ] ]
<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain
<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1, 2}
<box> = border-box | padding-box | content-box

where

<image> = <url> | <gradient>
<length-percentage> = <length> | <percentage>

where

<gradient> = <linear-gradient> | <radial-gradient>

#Difference between web

• <bg-layer> does not support the <attachment>
• <image> only support <url> and <gradient>

  _These properties are also supported in web such as <image-set>、<element()>、<paint()>、<cross-fade()> _
  

• <gradient> only support <linear-gradient> and <radial-gradient>

  These properties are also supported in web such as <repeating-linear-gradient()>,<radial-gradient()>,<repeating-radial-gradient()>,<conic-gradient()>

#Compatibility