CSS setting div background image implementation code

Adding background image control to a component requires only two steps:

<View
            className="gifts"
            style={{
              background: `url(${baseUrl}starMove/exclusiveEntrance/card.png) no-repeat`,
              backgroundSize: '100% 100%',
            }}
          >
          <View classname="gift-lists"></View>
</View>

Set background and backgroundSize.

style={

 width: 100%;
 height: 100%;
}

ps: Here is how to use CSS file to make the background image size adapt to the size of div

Setting the background image attribute: background-size: cover; can make the background image adapt to the size of the div.

background-size has 3 properties:

• auto: When this property is used, the background image will remain displayed at 100% size without any scaling. Anything beyond the div will be hidden. When the image is too small, it will be automatically tiled. This property is often used to create a repeating background or a semi-transparent image background.
• cover: When this attribute is used, the image will be scaled to just cover the div, and the hidden part of the image is minimal. This attribute is widely used in large image backgrounds. This is difficult to understand and requires practical application.
• contain: When this attribute is used, the image is scaled to the maximum and can be fully displayed, but because the size ratio of the image is different from the size ratio of the div, when the image cannot cover the div, the image will be automatically tiled.

Summarize

This is the end of this article about the implementation code of setting div background image with CSS. For more relevant CSS div background image content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!