Question

我有这个HTML。有以下内容：

<div class="item">
  <div class="bg_img"></div>
  <h1>morning</h1>
  <h2>today</h2>
  <p>lorem ipsum.</p>
</div>

此内容CSS的背景图片：

#container .item .bg_img{background:url('../img/mainpage/demo.jpg') no-repeat;}

这个结构工作正常。但我想将这些背景图像附加到正文和全屏尺寸。我怎么能通过JavaScript或纯jQuery（没有插件）来做到这一点？

Answer 1

尝试以下代码......

 #container .item .bg_img{
   background: url('/img/mainpage/demo.jpg') no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
 }

Answer 2

使用此CSS：

background-size: cover;

Answer 3

你的意思是一个与身体的背景有关而不是.item的图像吗？

你可以使用position：fixed。顶部，左侧，底部和右侧将确保它占据整个页面。

background-size：封面将确保图片本身将覆盖页面。根据您使用的图像，您可能需要其他解决方案。例如：您可以将图像居中并淡入背景色（但这取决于您）

使用-1的z-Index确保它不会遮挡您的内容

item .bg_img {
    background:url('http://www.ninahale.com/wp-content/uploads/2013/08/Post-Enhanced-Campaigns-World.jpg') fixed center center;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

小提琴：http://jsfiddle.net/Aa8fe/

Answer 4

即使我努力争取同样的原因，我得到了一个解决方案......下面......

    body //your container name
    {
        background-image: url(Images/caramel%20gradient%20for%20website.png);
        background-size: 100%;
    }

如何将内容背景图像拉伸到全屏？

4 个答案: