在导航栏正下方添加背景图片 [英] Adding a background image just below the navigation bar
问题描述
我想在导航栏正下方添加背景图像(具有全窗口大小的宽度).它不应覆盖整个页面的长度，而应从导航栏菜单的正下方开始，然后向下直至特定的指定高度.(但宽度已满).
我提到了以下内容，但仍然没有结果:
我想要这样的东西:
任何帮助将不胜感激.
我已经尝试了您的代码.尝试更改此行:
#backgroundimage {背景:url("image3.png");宽度:1024px；高度:500像素；背景重复:不重复；显示:块；职位:相对背景位置:0 500px；} 对此:
#backgroundimage {背景图片:url("image3.png");宽度:100vw;高度:100vh；背景大小:100％100％；背景重复:不重复；职位:相对} ，然后将其添加到您的CSS中:
nav{溢出:自动；} 这是一个有效的证明:
I want to add a background image (having a full window sized width) just below the navigation bar. It should not cover the whole page length, but starts just below the navigation bar menu, and goes down till a particular specified height. (but the width is full).
I referred to the following but still no results: Starting a background image below navbar in Twitter Bootstrap. I am also not using any Bootstrap.
This is what I have coded so far but no results:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Numberz</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<nav>
<img src="image2.png" alt="numberz" width="218px" height="38px" style="margin-left: 100px; margin-top: 15px; float: left; display: inline-block;">
<section style="margin-right: 150px;">
<ul id="menu">
<li><a href="#"><b>SIGNUP</b></a></li>
<li><a href="#"><b>LOGIN</b></a></li>
<li><a href="#"><b>ACCOUNTANTS</b></a></li>
<li><a href="#"><b>BLOG</b></a></li>
<li><a href="#"><b>FEATURES</b></a></li>
<li><a href="#"><b>PRICING</b></a></li>
</ul>
</section>
</nav>
<div id="backgroundimage"></div> //this is the division created for the background image
</body>
</html>
CSS:
ul#menu li {
display: inline-block;
float: right;
position: relative;
margin-top: 28px;
margin-left: 10px;
margin-right: 35px;
}
ul#menu li a {
text-decoration: none;
color: #808080;
font-family: "Helvetica Neue";
font-size: 15px;
}
#backgroundimage {
background: url("image3.png");
width: 1024px;
height: 500px;
background-repeat: no-repeat;
display: block;
position: relative;
background-position: 0 500px;
}
Right now It looks like this:
I want something like this:
Any help would be greatly appreciated.
I've tried your code. Try changing this line:
#backgroundimage {
background: url("image3.png");
width: 1024px;
height: 500px;
background-repeat: no-repeat;
display: block;
position: relative;
background-position: 0 500px;
}
to this:
#backgroundimage {
background-image: url("image3.png");
width: 100vw;
height: 100vh;
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
}
and then add this to your css:
nav
{
overflow: auto;
}
Here's a proof that it works:
这篇关于在导航栏正下方添加背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
