我如何将背景图片添加到我的标题中？

嗨没有人知道如何将背景图像添加到导航和其他图像后面的标题区域，因为我的目前似乎停止展开，一旦它达到标题标记内的另一个图像？我如何将背景图片添加到我的标题中？

感谢亚当:)

我假设我搞砸了某处简单，但我似乎无法工作了：/

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

我如何将背景图片添加到我的标题中？

回答

相关问题