Interface BackgroundProps

Accepted values for Background with an image.

If you are looking for background color, refer to ColorProps

Basically, all the well-known HTML properties are present, but their values are predefined.

See below an example using some of the properties:

Example:

<View
   backgroundImage={require("../assets/images/luminus-ui.jpg")}
   backgroundSize="cover"
   backgroundPosition="bottom"
   backgroundRepeat="repeat-x"
>
 <Text>My awesome text</Text>
</View>

Hierarchy

Properties

backgroundAttachment? backgroundBlendMode? backgroundClip? backgroundImage? backgroundOrigin? backgroundPosition? backgroundPositionX? backgroundPositionY? backgroundRepeat? backgroundSize? mixBlendMode? objectFit?

Properties

Optional backgroundAttachment

backgroundAttachment?: "scroll" | "fixed" | "local" | "none"

backgroundAttachment defines how a background image behaves in relation to the scrolling of content on the page.

Param

The option for attaching the background image.

  • "scroll": The background image scrolls with the content when the user scrolls the page.
  • "fixed": The background image remains fixed relative to the viewport and does not move when the user scrolls the page.
  • "local": The background image scrolls with the content of a specific element, such as a div.

Example:

   <backgroundAttachment="scrooll" />

Optional backgroundBlendMode

backgroundBlendMode?: "normal" | "multiply" | "screen" | "overlay" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "difference" | "exclusion" | "hue" | "saturation" | "color" | "luminosity"

Defines how background layers blend with each other. It applies blending effects between multiple background images, gradients, or colors within the same element.

Example:

   <View backgroundBlendMode="multiply" />

Optional backgroundClip

backgroundClip?: "border-box" | "padding-box" | "content-box" | "text"

The background clip area.

Example:

   <backgroundClip="border-box" />

Optional backgroundImage

backgroundImage?: any

Change the background Image

Example:

   <backgroundImage="myBoxShadow" />

Optional backgroundOrigin

backgroundOrigin?: "border-box" | "padding-box" | "content-box"

Sets the origin of background positioning

Example:

   <backgroundOrigin="border-box" />

Optional backgroundPosition

backgroundPosition?: string

The position of background

Example:

   <backgroundPosition="center" />

Optional backgroundPositionX

backgroundPositionX?: string

The horizontal position of background

Example:

   <backgroundPositionX="center" />

Optional backgroundPositionY

backgroundPositionY?: string

The vertical position of background

Example:

   <backgroundPositionY="center" />

Optional backgroundRepeat

backgroundRepeat?: "repeat" | "space" | "round" | "no-repeat" | "repeat-x" | "repeat-y"

Allows background repetition

Example:

   <backgroundRepeat="repeat" />

Optional backgroundSize

backgroundSize?: "cover" | "contain" | "auto"

Sets the background sizing

Example:

   <backgroundSize="cover" />

Optional mixBlendMode

mixBlendMode?: "normal" | "multiply" | "screen" | "overlay" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "difference" | "exclusion" | "hue" | "saturation" | "color" | "luminosity"

Determines how an element’s content blends with the background or elements behind it. It affects the entire element, including text and images, and creates effects similar to those in graphic design software.

Example:

   <View mixBlendMode="screen" />

Optional objectFit

objectFit?: "none" | "cover" | "contain" | "fill" | "scale-down"

Sets the object fit

Example:

   <objectFit="cover" />

Settings

Member Visibility

Theme

On This Page