在div中放置背景圖片

我有一個背景圖片，我想在頂部標題後顯示。這張圖片應該在頁面的其餘部分。在稍後階段，我甚至可以有一個頁腳，圖像應該佔據頁眉和頁腳之間的整個空白空間。我試圖在空白區域放置這個背景圖片，以便在圖片頂部可以顯示內容等我的div。但是，現在我只是簡單地將圖片放在body背景中，我成功地實現了這一點我想在頂部標題結束之後顯示背景圖片。在div中放置背景圖片

例子：http://jsbin.com/opokev/2

CSS：

.backgroundimage { 
background: url(http://s1.postimage.org/ur0h52mvy/Sketch2.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 


} 
div#masthead { 
    background-color: #262626; 
    height: 85px; 
    padding: 0; 
    position: relative; 
    width: 100%; 
    z-index: 500; 
}

HTML

<link rel="stylesheet" href="/stylesheets/style.css" type="text/css" media="screen" charset="utf-8"> 
<body> 
    <div id="masthead"></div> 
    <div class="backgroundimage"></div> 
</body>

來源

2011-08-16 Mike

您可以將圖像作爲身體的背景圖片，與頭的偏移，如下所示：

body { 
    background-image: url('http://s1.postimage.org/ur0h52mvy/Sketch2.jpg'); 
    background-position: 0px 85px; 
    background-repeat: no-repeat; 
} 
div#masthead { 
    background-color: #262626; 
    height: 85px; 
    padding: 0; 
    width: 100%; 
    margin: 0; 
}

來源

2011-08-16 11:30:57 TonioElGringo

body { background: url('http://s1.postimage.org/ur0h52mvy/Sketch2.jpg') no-repeat; background-position: 0px 85px; }

來源

2011-08-16 11:39:24 Luuk

在div中放置背景圖片

回答

相關問題