如何在我的页眉中添加背景图片？

Question

大家好，有人知道如何将背景图片添加到头部导航栏和其他图片之后的区域吗？我的问题是当它到达头部标签内的另一张图片时就不再扩展了。

感谢Adam :)

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

我假设我犯了一个简单的错误，但我似乎无法解决它 :/

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

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

- Adam Binns Binnsey

Answer 1

你写了 .header。去掉开头的点，就行了。这样它看起来会像这样：

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

- Gagan Kumar

---

对我来说，那没有任何作用，抱歉。 - Adam Binns Binnsey

我的意思是那应该可以工作，但它没有，我在HTML中设置图片有问题吗？ - Adam Binns Binnsey

Answer 2

您的值中有额外的空格，因此使其无效。

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

应该是

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

请查看jsfiddle

- Nix