大家好,有人知道如何将背景图片添加到头部导航栏和其他图片之后的区域吗?我的问题是当它到达头部标签内的另一张图片时就不再扩展了。
感谢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;}