Implementation code of setting div background in CSS

Time:2021-4-27

There are only two steps to add background control to a component


<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: now let’s introduce how the CSS file can make the size of the background image adapt to the size of the Div

Set the property for the background image: background size: cover; The background image can adapt to the size of Div.

Background size has three properties:

  • Auto: when using this property, the background image will be displayed at 100% size without any zooming. Extra parts over div will be hidden. When the picture is too small, the picture will tile automatically. This property is usually used for repetitive background or translucent image background.
  • Cover: when using this attribute, the image will be scaled to just cover div, and the hidden part of the image is the least. This attribute is widely used in large image background. This is difficult to understand and needs to be understood in combination with practice.
  • Contain: when this attribute is used, the image will be zoomed to the maximum and displayed completely. However, because the size ratio of the image and the div will be different, when the image cannot cover the div, the image will be tiled automatically.

summary

So far, this article about CSS setting div background map implementation code is introduced here. For more relevant CSS div background map content, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!