How to set a background image when developing a small program

Introduction:

We know that when developing WeChat applet, we cannot directly reference local images in the wxss file, otherwise the following error will occur during runtime:

(Learning video sharing: Programming video)

"Local resource images cannot be obtained through WXSS. You can use network images, or base64, or use 529e3f04aa2a4c2e8dfe6561022ed6a5 tag.

Specific steps:

1. Add an 565b296a3970f2fc50e58c1bb915cb79 tag in the wxml file:

<!--页面根标签-->
<view class="content">
	<!--pics文件夹下的background.jpg文件-->
	<image class=&#39;background&#39; src="../../pics/background.jpg" mode="aspectFill"></image>
	<!--页面其它部分-->
</view>

2. Add:

page{
  height:100%;
}
.background {
  width: 100%;
  height: 100%;
  position:fixed; 
  background-size:100% 100%;
  z-index: -1;
}

in the wxss file

It should be noted that z-index: -1 can put the picture at the bottom without affecting other parts.

(Related recommendations: 小program development tutorial)

The above is the detailed content of How to set a background image when developing a small program. For more information, please follow other related articles on the PHP Chinese website!