如何在标题中添加背景图像？ [英] How do i add a background image to my header?

问题描述

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

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?

感谢Adam：）

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

我假设我搞砸了一些简单但我似乎无法解决的问题：/

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

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'>









我的绿色能源

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

推荐答案

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

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

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

这篇关于如何在标题中添加背景图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！