我想让导航背景图像与我的页面高度相同，我不知道怎么做。我已经尝试了一堆不同的东西在这个网站上发现无济于事。我是HTML5和CSS的新手，所以如果这是一个愚蠢的问题，我很抱歉。这是我的CSS:
body {
background-color: #FF9933;
}
header {
background-image: url(orangesquares.png);
}
h1 {
background-color: #FFFFFF;
opacity: 0.6;
padding: 10px;
width: 275px
}
h2 {
color: #FF9933;
}
nav {
background-image: url(orangesquares.png);
float: left;
width: 200px;
margin-top: 0;
Margin-bottom: 0;
font-weight: bold;
}
nav ul {
list-style-type: none;
background-color: #FFFFFF;
opacity: 0.6;
padding: 10px;
}
#rightcolumn {
margin-left: 205px;
background-color: #ffffff;
color: #000000;
width: 80%;
}
.content {
padding: 10px 20px 0 20px;
}
#footer {
text-align: center;
font-size: 11px;
}
a:link {
color: #0033FF;
}
a:visited {
color: #0033FF;
}
figure {
width: 500px;
border: 1px solid #FF9933;
padding: 5px;
}
figcaption {
text-align: center;
font-size: 2em;
}
这是我的HTML代码的索引页:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sims 3 Open House</title>
<meta charset="utf-8">
<meta name="description" content="Sims 3 Open House provides information on houses included in the Sims 3 bin, such as what furniture is included and how many squares big the rooms are." />
<meta name="keywords" content="Sims 3, the sims 3, the sims, sims, open house, house, houses, home, homes, lots and houses bin, bin, premade, premade houses, lot size, house size, furniture" />
<link type="text/css" href="openhouse.css" rel="stylesheet" />
</head>
<body>
<header>
<h1>Sims 3 Open House</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li><br>
<li><a href="index.html#onebedroom">One Bedroom Homes</a></li>
<ul>
<li>Cabin Fever</li>
<li>Super Shack</li>
</ul>
<li><a href="index.html#twobedrooms">Two Bedroom Homes</a></li>
<ul>
<li>Ginger</li>
<li>Oak Grove Bungalow</li>
</ul>
<li><a href="index.html#threebedrooms">Three Bedroom Homes</a></li>
<ul>
<li>Cornucopia</li>
<li>Doubleday Lodge</li>
</ul>
<li>Contact Us</li>
</nav>
<article>
<div id="rightcolumn">
<div class="content">
<h2>Welcome</h2>
<p>Ever want to use a house from the Sims 3 bin but you aren't sure which one? What do they look like inside? How big are they really? What kind of furniture do they have? Well, here you can find all that information! I have split the bin houses into categories by number of bedrooms to make your search easier. On each house's page there is detailed information about the layout of each house, how big the rooms are, and what furniture is included, plus general info like lot size and price. All screenshots were taken in <a href="http://www.thesims3.com/assetDetail.html?assetId=7016943">Sunset Valley 2</a>. </p>
<a id="onebedroom"><h2>One Bedroom Homes</h2></a>
<figure>
<img src="cabinfever.jpg" width="500px" alt="The front facade of the home Cabin Fever." />
<figcaption>
Cabin Fever
</figcaption>
</figure> <figure>
<img src="supershack.jpg" width="500px" alt="The front facade of the home Super Shack." />
<figcaption>
Super Shack
</figcaption>
</figure>
<a id="twobedrooms"><h2>Two Bedroom Homes</h2></a>
<figure>
<img src="ginger.jpg" width="500px" alt="The front facade of the home Ginger." />
<figcaption>
Ginger
</figcaption>
</figure>
<figure>
<img src="ogb.jpg" width="500px" alt="The front facade of the home Oak Grove Bungalow." />
<figcaption>
Oak Grove Bungalow
</figcaption>
</figure>
<a id="threebedrooms"><h2>Three Bedroom Homes</h2></a>
<figure>
<img src="cornucopia.jpg" width="500px" alt="The front facade of the home Cornucopia." />
<figcaption>
Cornucopia
</figcaption>
</figure>
<figure>
<img src="doubleday.jpg" width="500px" alt="The front facade of the home Doubleday Lodge." />
<figcaption>
Doubleday Lodge
</figcaption>
</figure>
</div>
<br>
<div id="footer">
<footer>
Home | One Bedroom Homes | Cabin Fever | Super Shack | Two Bedroom Homes | Ginger | Oak Grove Bungalow | Three Bedroom homes | Cornucopia | Doubleday Lodge | Contact Us
<br>
Copyright © 2015 Natasha Schmidt
</footer>
</div>
</body>
</html>
为什么要把bg放在导航栏里?
设置为全高
nav
{
background-image: url(orangesquares.png);
background-size: cover;
float: left;
height:100%
width: 200px;
margin-top: 0;
Margin-bottom: 0;
font-weight: bold;
}
或者我不知道，就像
html{
padding:0; margin:0;background-image: url(orangesquares.png);
background-size: cover;
}