css使用頂部和底部填充來拉伸背景圖片

我想讓頁面的背景圖像伸展到全部寬度和高度。這裏面臨的挑戰是它應該在頂部和底部留出一個48像素的區域（這些是頁眉和頁腳區域，我們不希望這個圖像隱藏在那裏）。另外，我正在嘗試僅使用CSS（無JavaScript或客戶端代碼）。 CSS3是好的。css使用頂部和底部填充來拉伸背景圖片

這是我到目前爲止的地方。我已經能夠得到頂邊距：

background-image: url('images/image1.png') 
background-repeat: no-repeat; 
background-attachment:fixed; 
background-position: center 48px; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;

來源

2012-07-18 dreamerkumar

而不是使用的背景大小的，我會做一個div它內部的圖像，並將其定位絕對的窗口，然後定位你想要的一切相對而言，Z指數更高。 IE的早期版本不支持背景大小的CSS屬性，僅支持IE9 +。這是一個很小的例子：

<body> 
    <div class="bg-image"> 
     <img src="images/image-1.png" /> 
    </div> 
    <div class="content"> 
     <p>this is your content</p> 
    </div> 
</body>

那麼對於CSS：

.bg-image { 
    position: absolute; 
    width: 100%; 
    height: auto; /*or 100%*/ 
    z-index: 1; 
    padding: 48px 0px; 
} 

.bg-image img { 
    width: 100%; 
    height: 100%; 
} 

.container { 
    position: relative; 
    z-index: 2; 
    top: 0px; 
}

來源

2012-07-18 19:49:39 DOCbrand

謝謝。你的回答正好適合我，因爲我已經有了更高的z-index的頁眉和頁腳。猜猜img路線是更簡單的解決方案。仍然懷疑，如果我們可以將底部填充或邊距應用於背景圖像。 – dreamerkumar 2012-07-19 13:17:55

我會處理這個略有不同 - 我將堆放在彼此的前三名<div> S，與具有背景中間的一個圖像適用於你想要的。這樣，你可以製作第一個和第三個高度爲48px，或任何你想要的高度。

來源

2012-07-18 19:56:42 chipcullen

您可以在其中有一個包裝的div包裹都頁眉和頁腳：

.wrapper{ 
    width:100%; 
    height:48px; 
    background:(use solid color to cover your body background) 
}

它應該是這樣的：

<div class="wrapper"> 
<header> 
.. 
.. 
</header> 
</div

同樣的事情頁腳。

然後確保兩個頁眉和頁腳設置如下：

margin: 0 auto; 
width:980px (whichever is your width)

瞧。

來源

2012-07-18 20:14:15

css使用頂部和底部填充來拉伸背景圖片

回答

相關問題