在实际的网站建设过程中，一张图片经常用作网站的背景，然后在这个背景上面再布局放置一些元素，同时要求这个背景能够自适应于电脑与手机端，换句话说，就是移动端宽度是100%形式，而PC端是用一张1920px宽度的图片来实现两端自适应，下面就这种背景图片该如何布局展开讲解。
一个个的来，今天我们不讲原理，首先制作好一张图片，比如1920px与400px，图片名称为dd.jpg，电脑布局即放置在这个@media screen and (min-width:900px)里面的，直接上代码：
@media screen and (min-width:900px)
{
.hui1{width:100%; height:400px; background: url(dd.jpg) no-repeat center;}
.myff{ font-size:40px; color:#FF0000;}
}
上面的是网站建设的css样式，使用它布局如下：
<div class="hui1">
<div class="myff">
这是放在网站背景图片上的内容或是模块或是div区域，这个hui1是针对整个背景图片来的，而这个myff样式是针对图片上的布局来的。
</div>
</div>
下面继续研究自适应于手机即移动端的布局，先上代码：
@media screen and (max-width:500px)
{
.hui1{width:100%;height: 200px;background: url(dd.jpg) no-repeat; background-size:100% 100%;}
.myff{ font-size:16px;}
}
手机布局的代码当然与上面的电脑是一样的，否则就不能称之为响应式的了。
再说一下上面叙述的简单原理吧：
首先电脑端的，既然是自适应，自然宽度要设为100%，但此时一定要设置高度，这里要说一下，具体在网站制作中，不管在什么地方，也不管是什么形式的背景图片，都必须要设定高度才行，至于后面的background: url(dd.jpg) no-repeat center则代表背景图片不重复，并且居中，这个正常用在网站的内页banner图片。
在这儿再教大家一个技巧，就是如何让内页的banner产生链接，其实很简单，假如banner布局是<div class="abc"></div>，要加链接直接这样就行了：<a href=""><div class="abc"></div></a>，就这么简单。
手机端的css实际上跟电脑有点差不多，只是多了个background-size:100% 100%，而且兼容IE7及以上的浏览器，当然背景的高度也要设置一下。
