# Background The attributes in this topic are used to set the background color of a component.

Name

Type

Default Value

Description

backgroundColor

Color

-

Background color of a component.

backgroundImage

src: string,

repeat?: ImageRepeat

-

src: image address, which can be the address of an Internet or a local image. (SVG images are not supported.)

repeat: whether the background image is repeatedly used. By default, the background image is not repeatedly used.

backgroundImageSize

{

width?: Length,

height?: Length

} | ImageSize

Auto

Width and height of the background image. When the input is a {width: Length, height: Length} object, if only one attribute is set, the other attribute is the set value multiplied by the original aspect ratio of the image. By default, the original image aspect ratio remains unchanged.

backgroundImagePosition

{

x?: Length,

y?: Length

} | Alignment

{

x: 0,

y: 0

}

Position of the background image in the component.
- ImageSize enums

Name

Description

Cover

Default value. The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries.

Contain

The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries.

Auto

The original image aspect ratio is retained.
## Example ``` @Entry @Component struct BackgroundExample { build() { Column({ space: 5 }) { Text('background color').fontSize(9).width('90%').fontColor(0xCCCCCC) Row().width('90%').height(50).backgroundColor(0xE5E5E5).border({ width: 1 }) Text('background image repeat along X').fontSize(9).width('90%').fontColor(0xCCCCCC) Row() .backgroundImage('/comment/bg.jpg', ImageRepeat.X) .backgroundImageSize({ width: '250px', height: '140px' }) .width('90%') .height(70) .border({ width: 1 }) Text('background image repeat along Y').fontSize(9).width('90%').fontColor(0xCCCCCC) Row() .backgroundImage('/comment/bg.jpg', ImageRepeat.Y) .backgroundImageSize({ width: '500px', height: '120px' }) .width('90%') .height(100) .border({ width: 1 }) Text('background image size').fontSize(9).width('90%').fontColor(0xCCCCCC) Row() .width('90%').height(150) .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) .backgroundImageSize({ width: 1000, height: 500 }) .border({ width: 1 }) Text('background fill the box(Cover)').fontSize(9).width('90%').fontColor(0xCCCCCC) // Occupy all the space of the container, without ensuring that the image is completely displayed. Row() .width(200) .height(50) .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) .backgroundImageSize(ImageSize.Cover) .border({ width: 1 }) Text('background fill the box(Contain)').fontSize(9).width('90%').fontColor(0xCCCCCC) // Maximize the image while ensuring that it can be completely displayed. Row() .width(200) .height(50) .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) .backgroundImageSize(ImageSize.Contain) .border({ width: 1 }) Text('background image position').fontSize(9).width('90%').fontColor(0xCCCCCC) Row() .width(100) .height(50) .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) .backgroundImageSize({ width: 1000, height: 560 }) .backgroundImagePosition({ x: -500, y: -300 }) .border({ width: 1 }) } .width('100%').height('100%').padding({ top: 5 }) } } ``` ![](figures/back.png)