背景圖像水平伸展

我的網站有一個水平滾動結構，它是響應式的。例如。我的網站寬度：9600px在我的屏幕上。背景圖像水平伸展

而我有一個背景圖片。像這樣的口主體後：

<div class="bg"> 
    <img class="bg-st" src="themes/bc/images/bc-bg.png"> 
</div>

和CSS：

.bg { 
bottom: 15; 
position: absolute; 
z-index: 1; 
width:100% 
height:100% 
} 
.bg-st { 
width:100%; 
height:100%; 
}

我有，根據屏幕拉伸此背景圖像。我的CSS代碼不工作。我怎樣才能通過JavaScript或CSS做到這一點？

來源

2013-01-24 Dokuz Tane On

你可以請你所有的代碼在j sfiddle，包括對圖像的在線參考？ –

有關頁面上設定背景試試下面的CSS

body { 
    background: url(bgimage.jpg) no-repeat; 
    background-size: 100%; 
}

如果你想拉伸圖像，並將其設置爲全屏，然後嘗試以下...

#imgbg { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: -5000; 
} 

<div class="bg"> 
    <img id="imgbg" src="themes/bc/images/bc-bg.png"> 
</div>

來源

2013-01-24 14:36:21 Pandian

是的，我試過但不工作。我不想在屏幕上伸展。我想要在所有網站身上伸展。例如。不是1600像素，想要9600像素。 –

看到這個鏈接http：//jsfiddle.net/RYh7U/36/...你需要這樣的權利...？ – Pandian

不，我的結構是這樣的：http://jsfiddle.net/RYh7U/47/ –

您可以將其設置爲您的div的背景，並設置背景大小屬性以覆蓋：

.bg { 
bottom: 15; 
position: absolute; 
z-index: 1; 
width:100% 
height:100% 
background: url("themes/bc/images/bc-bg.png") no-repeat left fixed; 
background-size: cover; 
}

來源

2013-01-24 14:39:13 StuR

<div class="main"> 
    aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa 
<div class="bg"> 
    <img id="imgbg" src="image.jpg"> 
</div>

它顯示輸出這樣

enter image description here

如果您使用如下

<style> 
#imgbg { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: -5000; 
} 
</style> 

<div class="main"> 
    aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa 
<div class="bg"> 
    <img id="imgbg" src="image.jpg"> 
</div>

然後dispaly像下面的圖片的代碼.... enter image description here

來源

2013-01-24 15:53:41 Pandian

偉大的，但你認爲這：my bg 10000px我想橫向瀏覽器。像溢出選項一樣。 –

背景圖像水平伸展

回答

相關問題