宽度一定且使背景图片不变形的情况下，背景图片不随内容滚动（固定）

情景描述

在做一个移动端的项目时，内容如果超出手机高度，出现滚动条向下滑动时要求背景图片不能跟随内容滑动，且背景图片不会变形。这里会想到用background-attachment:fixed;来解决这个问题。下面先上一段代码。

代码

html代码

<div class="wrapper">
<div class="wrapper-container">
<p>我是内容啊</p>
<p>我是内容啊</p>
<p>我是内容啊</p>
<p>我是内容啊</p>
<p>我是内容啊</p>
</div>
</div>

css代码

.wrapper{
background-image:url('../images/bg-01.png');
background-attachment:fixed;
background-position:100% 100%;
background-repeat:no-repeat;
}
.wrapper .wrapper-container{
width:100%;
}

js代码

var wh=$(window).height();
var ww=$(window).width();
var ch=$('.wrapper .wrapper-container').height();
if(ch<=ww){
$('.wrapper').height(wh).width('ww');
}
else{
$('.wrapper').height(ch).width('ww');
}

理解

对这段代码解释说明一下，也许不是最简便的，但是目前我只能想到这样做了。变量wh、ww、ch分别指手机的高度、宽度和内容的高度。HTML先给内容的外层加个包裹的div，给这个包裹的div设置背景图片，让其固定，此时注意，在设置background-attachment:fixed;的时，要同时设置它的background-position:100% 100%;这样背景图片刚好填满整个div且固定位置了。不同手机的手机屏幕的宽度和高度都可以获得，此时外层包裹的div的宽度为设备宽度即可，内容层宽度width设为100%。

主要是高度要随内容的高度不同而不同。如果内容层的高度小于手机屏幕的宽度，那个就让包裹层的div的高度为手机屏幕的宽度。否则让包裹层的div的高度为内容层的高度。

在此使用了jquery框架，其实我在使用中，把我的内容都写在了

<div class='container'></div>

中，就是在

<div class="wrapper-container"></div>

下又嵌套一个

<div class='container'></div>

,我觉得这样会更好一些。

图片