我的网站上有bootstrap导航栏。在这下我想要100%宽度和100%高度的背景图像。在这个bg图像下将是下一个然后下一个....并且在每个bg图像上将是一些文本。我试过了evertyhing而没有。
任何想法如何解决?
由于
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/style.css" rel="stylesheet" media="screen">
<script src="bootstrap/js/jquery-1.9.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div class="first_section">
<div class="menu">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<a class="navbar-brand" href="#">title</a>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">HOME</a>
</li>
<li>
<a href="#">ABOUT ME</a>
</li>
<li>
<a href="#">WORK</a>
</li>
<li>
<a href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- end of class menu-->
<div class="first_background"></div>
</div>
<div class="first_title">
<p>Text</p>
</div>
<div class="second_section">
<div class="second_background"></div>
</div>
<div class="third_section"></div>
<div class="fourth_section"></div>
</body>
</html>
CSS:
body
{
margin: 0px auto;
}
.first_background
{
background-image: url(../images/first_bg.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}