background image not showing properly
Question
I am trying to set a background image for a header. This is what I want it to look like:
This is what I am getting:
So, a tiny weird strip at the bottom end. Here is my code:
html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="JavaScript2.js"></script>
</head>
<body>
<div id="header">
<nav class="cf" id="menu">
<ul>
<li><a href="about.html">ABOUT</a></li>
<li><a href="gallery.html">FOLK</a></li>
<li><a href="contact.html">JAZZ</a></li>
<li><a href="shop.html">SIGNATURE</a></li>
<li><a href="contact.html">NYLON</a></li>
<li><a href="shop.html">CONTACT</a></li>
</ul>
</nav>
</div>
<div id="container">
<div id="logo">
<img id="rays" src="Images/PNGs/rayons.png">
<img id="base" src="Images/PNGs/baseLogo.png">
<img id="roue" src="Images/PNGs/roue.png">
<img id="letters" src="Images/PNGs/title.png">
</div>
</div>
<div id="footer">
</div>
<script type="text/javascript" src="JavaScript2.js"></script>
</body>
</html>
css
html, body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: absolute;
background-image: url("Images/menu.jpg");
width: 100vw;
height: 10vh;
opacity: 1;
z-index: 6;
background-size: 100% 100px;
}
I have tried adding a size property to the background, like so:
background-size: 100% 100px;
And that's how I am getting the tiny strip at the bottom. Without that property I get nothing at all. Also, the header is not as long as the page although I have set the width at 100vw. Thanks of your time.
4 answers
solution1
3 2017-03-23 13:44:32
I made some changes to your header:
#header {
/*position: absolute;*/
background-image: url("Images/menu.jpg");
/*width: 100vw;
height: 10vh;
opacity: 1;
z-index: 6;*/
background-size:cover;/*added this*/
padding: 5px;/*added this*/
}
JSfiddle: https://jsfiddle.net/sg7dfpzj/
Hope that helps, cheerio!
solution2
1 2017-03-23 13:17:10
Remove height for #header Class
#header {
position: absolute;
background-image: url("Images/menu.jpg");
width: 100vw;
/*height: 10vh;*//*Remove this*/
opacity: 1;
z-index: 6;
background-size: 100% 100px;
}
solution3
0 2017-03-23 13:37:54
在页眉的顶部和底部添加填充，直到显示所有图像为止，这是空白的问题，您无需告诉浏览器如何显示图像，添加更多内容或在顶部和底部添加填充。
solution4
0 2017-03-23 13:52:48
Where is your code for the class="cf" and id="menu" for the line <nav class="cf" id="menu"> in the body section of the HTML code?
There might be an error there. Check it out.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.