設置第二個背景圖片？

我是新來的CSS，我不知道我應該如何添加一個背景圖像只爲我的頭。我已經有了整個頁面的背景圖片，但是我知道我只需要爲我的頁眉設置一個背景圖片。爲什麼這段代碼不起作用，我應該如何解決它。設置第二個背景圖片？

HTML代碼：

<!DOCTYPE html> 
<html lang="nl"> 
<head> 
    <title>De fonduepot | Home</title> 
    <meta charset="utf-8" /> 
    <link rel="stylesheet" href="css/start.css" /> 
    <link rel="stylesheet" href="css/styles.css" /> 
    <link rel="stylesheet" href="css/home.css" /> 
    <link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'> 
</head> 
<body> 
    <header> 
     <div class="wrapper"> 
     <img class="left" src="images/thefonduepot.png" alt="foto van een fonduepot" /> 
     <h1>De fonduepot</h1> 
     <img class="right" src="images/thefonduepot.png" alt="foto van een fonduepot" /> 
     </div> 
    </header> 
</body> 
</html>

CSS代碼：

body { 
background-image: url("../images/houtachtergrond.jpg"); 
} 

.wrapper { 
width: 70%; 
margin: 0 auto; 
} 

header .wrapper { 
background-image: url("../images/zand.jpg"); 
} 

h1 { 
float: left; 
font-family: 'Bitter', serif; 
font-size: 4rem; 
line-height: 3.5rem; 
width: 20rem; 
text-align: center; 
margin-left: 9rem; 
color: #8A0810; 
margin-top: 1.25rem; 
} 

header .left { 
float: left; 
width: 10rem; 
} 

header .right { 
float: right; 
width: 10rem; 
}

來源

2014-04-30 user3275947

您需要設置背景圖像的寬度和高度以包含在裏面。

http://jsfiddle.net/sS3u8/

header .wrapper { 
    background-image: url("../images/zand.jpg"); 
    width: 100%; 
    height: 300px; 
    background-size: contain; 
}

來源

2014-05-01 00:02:44

感謝它的工作 – user3275947

這

header .wrapper { 
background-image: url("../images/zand.jpg"); 
}

相反，你可以嘗試這樣的事情

header { 
background-image: url("../images/zand.jpg"); 
}

雖然有點奇怪，我的意思是header .wrapper的定義。我寫的第二個例子應該爲標題標籤設置提供的背景圖像，當然它可以給你更多關於如何做其他事情的想法。

來源

2014-04-30 23:56:12 rsz

它仍然無法正常工作 – user3275947

可能你也許提供您的實現上的jsfiddle的例子嗎？看看有什麼不對（當然上傳到某些主機的圖片也可以看到這些） – rsz

我不知道該如何處理，我不能只是郵寄一個zip文件或其他東西？ – user3275947

設置第二個背景圖片？

回答

相關問題