Html 如何在我的标题中添加背景图片？

How do i add a background image to my header?

提问by Adam Binns Binnsey

Hi does anyone know how to add a background image to the area of the header behind the navigation and other images as mine currently seems to stop expanding once it reaches another image within the header tag?

嗨，有谁知道如何将背景图像添加到导航和其他图像后面的标题区域，因为我的当前似乎在到达标题标签内的另一个图像时停止扩展？

Thanks Adam :)

谢谢亚当:)

http://jsfiddle.net/Binnsey/3xaq2mqn/

http://jsfiddle.net/Binnsey/3xaq2mqn/

I'm assuming i messed up somewhere simple but I can't seem to work it out :/

我假设我在某个简单的地方搞砸了，但我似乎无法解决：/

HTML My Green Energy Home Page http://fonts.googleapis.com/css?family=Signika:400,600'> http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'> My Green Energy

HTML 我的绿色能源主页 http://fonts.googleapis.com/css?family=Signika:400,600'> http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/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

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;}

采纳答案by Gagan Kumar

You wrote .header. Remove the Dot in the beginning of header and your done. so it would look the this:

你写了.header。删除标题开头的点并完成。所以它看起来像这样：

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

回答by Nix

You are having an extra space in your value, thus making it invalid.

您的值中有一个额外的空间，从而使其无效。

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

should be

应该

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

See jsfiddle

见jsfiddle