我如何將背景圖片添加到我的標題中？

嗨沒有人知道如何將背景圖像添加到導航和其他圖像後面的標題區域，因爲我的目前似乎停止展開，一旦它達到標題標記內的另一個圖像？我如何將背景圖片添加到我的標題中？

感謝亞當:)

我假設我搞砸了某處簡單，但我似乎無法工作了：/

HTML 我的綠色能源首頁 http://fonts.googleapis.com/css?family=Signika:400,600'> http://fonts.googleapis.com/css?family=PT+Sans:400,700'rel ='style表」類型= '文本/ CSS'> 我的綠色能源

<nav> 
    <label for="show-menu" class="show-menu">Show Menu</label> 
    <input type="checkbox" id="show-menu" role="button"> 
    <ul id="menu"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">My Metre</a></li> 
     <li><a href="#">Customer Help</a></li> 
     <li><a href="#">Social Media</a></li> 
    </ul> 
</nav> 
</header>

CSS

body{ 
    max-width: 1200px; 
    margin: 0 auto; 
    width: 70%; 
    clear: both; 
    height: 100%; 
    background-color: #DCDCDC; 
    padding-top: 30px ; 
    margin: 0 auto; 
    padding-top: 30px ; 
    font-family: 'PT Sans', sans-serif; 
    font-size: 100%; 
    text-align: left; 
    line-height: 1.5; 
    padding: 2%; 
    border-radius: 10px; 
    box-shadow: #0AF73A 0px 0px 50px;} 

.header { 
    width: 100%; 
    background-image:url("images/webheader.jpg"); 
} 

.MainHeader { 
    background-color: #71B315; 
    background: url (images/webheader.jpg); 
    /* clearfix */ 
    overflow: auto; 
    margin-top: 2% 0;} 

.MainHeader nav { 
    background-color: #2f3036; 
    height: 60px; 
    border-radius: 5px; 
    margin-right: 10px; 
    margin-left: 10px; 
    border-radius: 5px; 
    -webkit-border-radius: 5px;} 

.content { 
    margin-bottom: 2%} 

.MainHeader {margin-bottom: 2%;} 

.MainHeader img { 
    width: 20%; 
    height: auto;} 

.MainHeader { 
    padding-top: 20px; 
    padding-bottom: 10px;} 

.headertext { 
    display: inline;} 

.logo { 
    display: inline; 
    vertical-align:middle} 

#menu .MainHeader nav a:hover, .MainHeader nav a:active 
#menu .MainHeader nav .active a:link, .Mainheader nav .active a:visited { 
    background-color: ; 
    text-shadow: none;} 

.MainHeader nav ul li a { 
    border-radius: 5px; 
    -webkit-border-radius: 5px;}

來源

2014-12-07 Adam Binns Binnsey

你寫.header。在標題開始處刪除點並完成。所以它看起來是這樣的：

header { 
    width:100%; 
    background-image:url("images/webheader.jpg"); 
}

來源

2014-12-07 23:28:48

這並不爲我難過 – 2014-12-07 23:31:21

做任何事情，我只是固定它 – 2014-12-07 23:33:51

我的意思是應該工作，但它不是我在設置圖像在HTML中錯誤？ – 2014-12-07 23:51:04

您的值有額外的空間，從而使其無效。

.MainHeader { 
    background: url (images/webheader.jpg); 
}

應該

.MainHeader { 
    background: url(images/webheader.jpg); 
}

見jsfiddle

來源

2014-12-07 23:33:45 Nix

我如何將背景圖片添加到我的標題中？

回答

相關問題