自動調整大小的backgorund圖像

-1

網站的結構如下：

頭包含兩種顏色具有100像素的固定高度。大型機應該包含高度可變的切片圖像。頁腳包含一種顏色，並且也具有100px的固定高度。

所以我的切片圖像的高度爲550px，並且在內容不會更大的情況下，它將完全適合頁眉和頁腳之間的距離。

<html> 
<body> 
    <div class="wrapper"> 

     <div id="header">header</div> 

     <div id="mainframe">INSIDE HERE SHOULD BE PLACED THE SLICED IMAGE BUT THE CONTENT IS MORE THAN 550PX</div> 

     <div class="push"></div><!--Push for sticky footer--> 

</div><!--Wrapper --> 

    <div class="footer">footer</div> 
</body>

example

現在的問題是，我的內容會比550px更大，因爲褪色的顏色會有一個硬edgde，你能看到的圖像結束。所以我認爲這將是很好的時候，切片背景圖像可以自動調整大小。

有沒有辦法通過使用CSS來實現？

非常感謝。

來源

2012-12-04 bonny

嘗試

background-size: 100% Auto;

來源

2012-12-04 17:07:19

它不工作。其完全像以前 – bonny

你可以嘗試

background-size:cover;

來源

2012-12-04 17:19:12 Thorgeir

不工作。圖像的大小保持在550px – bonny

簡短的回答：不幸的是，不與調整CSS背景圖像的方式。

通常，使用background-repeat：repeat-x有一個巧妙的解決方法：或background-repeat：repeat-y;屬性，並使用仔細切片的背景圖像。

如果你有一個圖像的例子，我可以幫助更多。

來源

2012-12-04 17:29:57 Sean

自動調整大小的backgorund圖像

回答

相關問題