项目开发过程中，往往会遇到小程序某个模块需要添加个背景图片，

css中添加背景图片的方法是 background : url( ... ) no-repeat 0px 0px; 

但是小程序添加背景图片的方法并不适用上述方式，你只能在 view 中加一个 image标签 ，然后让这个标签设置定位，并且 z-index:-1 即可。

<view class="dis">
  <image class="freeBG" src="../../images/freeBG.png"></image>
  <view class="free-item"></view>
  <view class="free-item"></view>
</view>

.freeBG{
  width: 100%;
  height: 330rpx;
  position: absolute;
  z-index: -1;
}



后期补充：

今天发现小程序支持在wxss中使用 background: url('网络图片地址')，但是不支持url内放本地图片地址，会报错，只支持网络地址图片。

当在wxss中使用background:url("../XXX.jpg")来获取本地图片作为背景图的时候会报错：

xxx.wxss中的本地资源图片无法通过wxss获取，可以使用网络图片或者base64，或者<image />标签。



其实人家已经把解决方式都告诉我们了，只是一开始不知道怎么将自己的本地图片弄成一张网络图片并获取URL （base64太长，不想用；<image>标签定位，设置z-index即可）

其中一种方法是：

将图片上传到你QQ 空间（相册），F12，找到图片路径，然后将之放到background-image即可



还可以自己搭建图片服务器，这个等找时间再研究分享

使用 /static/img/aaa.png 这种路径是不行的，

上述你在编译器里能看到，但是到了手机里就看不到了

 

建议使用 url 或者 base64 转码

 

这里是图片转码传送门    http://imgbase64.duoshitong.com/

微信小程序设置背景图片

不能设置background-image:url(/img/pic.png) no-repeat center;

1、要么将图片转成base64设置为背景图片

2.要么放在服务器上
图片在线转换为base64网址：http://imgbase64.duoshitong.com/