你好，请问，如果一个页面用CSS添加两个背景图片一个在页头居中不平铺，一个在页头下面垂直平铺改怎么

Question

你好，请问，如果一个页面用CSS添加两个背景图片一个在页头居中不平铺，一个在页头下面垂直平铺改怎么实现？

Answer 1

既然存在超宽，又大分辨率小分辨率的，我建议把第二个（你所说的上下左右都平铺的图）放在body中，这样整个背景都充满这个图的平铺效果了；
页头居中且不平铺的背景，放在div(示例为class为header的div)中就可以了，其中50%是居中显示；0是居顶；height是需要的高度，width是宽度，可以根据需要来设置；
代码如下：
body{background:url(image2.jpg) repeat 0 0;}
div.header{background:url(image1.jpg) no-repeat 50% 0; height:100px; width:100%;}
很简单，你试下　:)

Answer 2

尽量别误用术语名词,用图或者形容你的需求比较好一些.
又页头又下面的,这取决于你html中的代码结构,单用css是无法实现的
假设代码如下
<div class="header">
<div class="nav"></div>
</div>
你说的居中图片放在header中, 垂直居中的图片放在nav中
你说的分辨率问题是靠页面去实现而不是图片,页面居中,图片才居中
居中需要宽度,也就是.header{width:800px;margin;0 auto;background:url(居中图片地址) no-repeat center;}但你想看到效果的话,header的宽和高得够呈现图片大小的.同理nav. 不同的只是repeat和center

仍有疑问的话追问吧来自：求助得到的回答

Answer 3

如果是css2.0的话则不可能在一个html标签中添加两个背景，但如果将两个html（如div）框，叠在一起并分别加上各自的背景就能实现，也很好实现，再各自设置各自的背景效果就OK了
#div1{background:url(image1.gif) no-repeat 50% 0%;}
#div2{background:url(image2.gif) repeat-y 0 0;}

Answer 4

你的问题有点抽象，不知道这样你能不能看懂

追问

好好 就是这样子的，整个代码该怎么写呢？ 还有之前我弄的页头背景一旦超过平铺分辨率就不平铺了！

追答

无标题文档

.bj{ width:100%; height:500px; background:url(../images/xxxx.jpg) repeat;}
.top{ width:500px; height:200px; margin:0 auto; background:url(../images/000.jpg) no-repeat;}

追问

黑色部分我做的是偏大的分辨率，目的要不管小分辨率还是大分辨率的显示器查看都会在居中状态，而且是置顶的。另外 页面背景说错了 ，是上下水平平铺T_T。谢谢！

本回答被提问者采纳