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

我有這個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（無插件）來做到這一點？

來源

2013-09-26 Dokuz Tane On

你能創建一個小提琴並將它鏈接到這裏嗎？ – nrsharma

[你可以用純CSS做到這一點]（http://css-tricks.com/perfect-full-page-background-image/）。該頁面上還有一個jQuery版本。 –

嘗試使用'background-size：cover;' – ostapische

使用此CSS：

background-size: cover;

來源

2013-09-26 13:01:22 fred02138

參考：http：//www.w3schools.com/cssref/css3_pr_background-size.asp – fred02138

background-size：僅覆蓋此項目類中的全屏。但我希望所有屏幕都是全圖 –

@DokuzTaneOn嘗試background-size：100％100％; – fred02138

試試下面的代碼...

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

來源

2013-09-26 13:01:42

background-size：僅覆蓋此項目類中的全屏。但是我希望所有的屏幕都是完整的圖像。 –

將#container的寬度和高度設置爲100％，並且它像魅力一樣工作！謝謝！ –

-1

即使我奮鬥了相同和atlast我有以下solution..its ..

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

來源

2013-09-26 13:03:56 Sasidharan

background-size：僅覆蓋此項目類中的全屏。但我想所有的屏幕都是完整的圖像 –

我叮囑你..你的意思是你有單幅圖像，必須拉伸到窗口大小。 – Sasidharan

你的意思是一個與身體上下文相關的圖像，而不是.item的圖像？

您可以使用position：fixed。頂部，左側，底部和右側將確保它將佔據整個頁面。

background-size：封面將確保圖像本身將覆蓋頁面。根據您使用的圖像，您可能需要其他解決方案。例如：你可以居中的圖像和褪色的背景顏色（但是這取決於你）

使用的Z指數-1，以確保它不會掩蓋你的內容

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/

來源

2013-09-26 13:19:45 hvgeertruy

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

回答

相關問題