background-image#

#Introduction

The background-image CSS property sets one or more background images on an element.
The background images are drawn on stacking context layers on top of each other. The first layer specified is drawn as if it is closest to the user.
The border of the element are then drawn on top of them, and the background-color is drawn beneath them. How the images are drawn relative to the box and its borders is defined by the background-clip and background-origin CSS properties.

#Examples

css-apisrc/background-image/App.tsx

Preview

#Syntax

background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 0, 0.5),
    rgba(0, 0, 255, 0.5)
  ),
  url('https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/lynx-website/assets/doc/catfront.png');

#Values

Each background image is specified either as the keyword none or as an <image> value.

• none Is a keyword denoting the absence of images.

• <image> Is an <image> denoting the image to display. There can be several of them, separated by commas. The supported image formats for background-image are the same as those for image, including jpg, png, gif, webp, etc. Refer to Supported Image Formats

#Events

#Related properties of view

#Formal definition

#Formal Syntax

background-image = <bg-image>#

<bg-image> = none | <image>

<image> = <url()> | <gradient>

<url()> = url(<string>)

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

<linear-gradient()> = 
  linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )

<radial-gradient()> = 
  radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )

<side-or-corner> = 
  [ left | right ] || [ top | bottom ]

<ending-shape> = 
  circle | ellipse

<size> = 
  closest-side       |
  farthest-side      |
  closest-corner     |
  farthest-corner    |
  <length>           |
  <length-percentage>{2}

<position> = 
  [ left | center | right ] || [ top | center | bottom ]                            |
  [ left | center | right | <length-percentage> ] 
    [ top | center | bottom | <length-percentage> ]?                                |
  [ [ left | right ] <length-percentage> ] &&
    [ [ top | bottom ] <length-percentage> ]

<color-stop-list> = <linear-color-stop> ( ',' <linear-color-stop> )*

<linear-color-stop> = <color>

<length-percentage> = <length> | <percentage>

#Difference between web

• <image> Only support <url()> and <gradient>.

• <gradient> Only support linear-gradient and radial-gradient.

• <linear-color-stop> Not support linear-color-hint

  Not support color-interpolation-method

  Not support <length> value for position

#Compatibility

LCD tables only load in the browser