如何在标题中添加背景图像？答案

【问题标题】：How do i add a background image to my header?如何在标题中添加背景图像？
【发布时间】：2015-02-05 14:01:19
【问题描述】：

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

谢谢亚当 :)

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

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

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

【问题讨论】：

标签： html css

【解决方案1】：

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

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

【讨论】：

对不起，这对我没有任何帮助
我的意思是应该可以，但不是我在 HTML 中设置了错误的图像吗？

【解决方案2】：

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

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

应该是

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

见jsfiddle

【讨论】：