CSS图像使用引导程序导航栏自动调整大小

时间:2014-03-23 22:19:49

标签: html css twitter-bootstrap

我的网站上有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;
 }

0 个答案:

没有答案