一个固定的背景全屏可调整大小,然后添加第二个图像不固定/或包装

时间:2012-11-02 02:02:11

标签: css background wrapper

我已经应用了背景图片,全屏并修复了任何分辨率:

body {

background:url('http://upload.wikimedia.org/wikipedia/commons/e/e7/Sky_with_puffy_clouds.JPG') no-repeat center center fixed;
-webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;

}

然而,我现在需要的是在中心放置另一个图像,如果浏览器调整大小,它将重复向下(可滚动)并跟随正文。 (图像为here)。

当我尝试在body html中使用逗号添加第二个图像时,应用第一个图像中的“无重复中心固定; -webkit-background-size:cover; ....”操作新的。

有没有办法按照我描述的方式添加另一张图像并保持原始图像的原样?

基本上我想用这个图像作为一切,身体等的包装。

我道歉,我是新手,我刚刚开始熟悉这些事情。

1 个答案:

答案 0 :(得分:1)

HTML:

<div class="main">
<p>I think your problem solved.
   I think your problem solved.
   I think your problem solved.
   I think your problem solved.
   I think your problem solved.
   I think your problem solved.
   I think your problem solved.
   I think your problem solved.
   I think your problem solved.
   I think your problem solved.</p>
   </div>

CSS:

body {
width:100%;
background:url('http://upload.wikimedia.org/wikipedia/commons/e/e7/Sky_with_puffy_clouds.JPG') no-repeat center center fixed;
-webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;

}

.main{
  margin:0 auto;
  width:960px;
  background:url('http://1.bp.blogspot.com/-fcyW3-zf_QU/UJMiLfDY44I/AAAAAAAAAIg/wA9ZVtJ3aLM/s1600/innertest.jpg') no-repeat;

}