如何將內容背景圖像拉伸到全屏？

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%;
    }