Background

icon-note.gif NOTE This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.

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

Required Permissions

None

Attributes

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 })
  }
}

en-us_image_0000001211898502