How to add background image to WeChat applet

I often set a color background for WeChat mini-programs, but suddenly I find a good-looking picture, how to set it as the background?

How to add a WeChat mini-program Background image

The following summarizes three methods:

1. Set the network image through background-image in wxss to add a background image；

The background-image in the WeChat mini program cannot use local images

Recommended learning: Mini program development

background-image:url(https://xxxxxxxxxxxxxxxxxxxxxx)

2. Convert the image to Base64 encoding format, and then use background-image to add the background image;

background-image:url(转换之后的base64字符串)

3. Use flow layout, set the z-index level, and The image tag is placed at the bottom to add a background image.

//html
<view class="container">
  <image src=&#39;../image/1.jpg&#39;></image>
  <view class=&#39;up&#39;>
    我是一串字符串
  </view>
</view>
//css
.container{
  width: 100%;
  height: 600rpx;
  margin: 0;
  padding: 0;
  position: relative;
}
image{
  position: absolute;
  width: 100%;
  height: 600rpx;
}
.up{
  position: absolute;
  z-index: 1;
}

PHP Chinese website, a large number of website construction tutorials, welcome to learn!

The above is the detailed content of How to add background image to WeChat applet. For more information, please follow other related articles on the PHP Chinese website!