微信小程序背景图片

.backpicture{
  width:100%;
  height: 250rpx;
  background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524997977864&di=34994cfd234a57759aa5ab9cdde3bffa&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F038ceb855deb9790000015995eebd72.jpg)no-repeat;  /*只能用网络地址*/
  background-size: cover;
  /*层叠布局*/
  z-index: 0;
  /*相对位置，这样其他view就能用绝对位置覆盖上去*/
  position: absolute;
}

 

<view class = 'backpicture'> 
背景图片
</view>

 

图片网络地址获取方法

右击图片点击复制图片地址

 

自己上传的图片也可以

点击上传图片就可以看到上传的那张图片的地址了

 

复制进去

 

背景图片的显示方式：
    当然，只用上面的代码，是无法表达出自己想要的效果的。因为，图片小了，就会以平铺的方式，如果是大了，为显示它，就是会出现滚动条，这样多不好。因此，我们还得多其进行显示控制，也就是要用到background-repeat，
    当然，只用上面的代码，是无法表达出自己想要的效果的。因为，图片小了，就会以平铺的方式，如果是大了，为显示它，就是会出现滚动条，这样多不好。因此，我们还得多其进行显示控制，也就是要用到background-repeat，

 

repeat :     默认值。背景图像在纵向和横向上平铺 
no-repeat : 背景图像不平铺 
repeat-x :    背景图像仅在横向上平铺 
repeat-y :    背景图像仅在纵向上平铺

加上
.backpicture{
background-repeat:no-repeat
}

background-position： center|left|right|top|bottom