DEMO

Question

你可以帮助使这个jumbotron bg图像响应吗？我已经阅读了几个主题，但没有一个能够工作。谢谢！这是HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Practice Website 1 Bootstrap</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
</head>
<body>
    <!-- Navigational Start Container-->
    <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
            <a href class="navbar-brand">E-DATA TECHNOLOGY</a>
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>

            <div class="collapse navbar-collapse navHeaderCollapse">
            <ul class="nav navbar-nav navbar-right">


            <li class="active"><a href="#">HOME</a></li>
            <li><a href="#">ABOUT US</a></li>
            <li><a href="#">LINKS</a></li>
            <li class="dropdown"> <!-- Dropdown Link Start-->
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">MEDIA<b class="caret"></b></a>
            <ul class="dropdown-menu"> 
                <li><a href="#">FACEBOOK</a></li>
                <li><a href="#">TWITTER</a></li>
                </ul> <!-- Dropdown Link End-->
            </li>
            <li><a href="#">CONTACT</a></li>
            </ul>
            </div>
    </div>
    </div> <!-- Navigational Start Container-->

        <div class="jumbotron">
        <h1>Success!!!</h1>
<p>Removed Jumbotron Padding and Margin/ still not a success
</p>
        </div> 


    <div class="container"> <!-- Grid System Content -->
        <div class="row">
        <div class="col-md-4">
        <h3><a href="#">LOREM IPSUM DOLOR 1</a></h3>
        <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
    lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
    lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
    lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit<a class="btn btn-danger">ReadMore</a></p>
        </div>
        <div class="col-md-4">
        <h3><a href="#">LOREM IPSUM DOLOR 2</a></h3>
        <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
    lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit <a class="btn btn-danger">ReadMore</a></p>
        </div>
        <div class="col-md-4">
        <h3><a href="#">LOREM IPSUM DOLOR 3</a></h3>
        <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
    lobortis nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate velit.  <a class="btn btn-danger">Read More</a></p>
        </div>
        </div>

    </div>


    <!-- Footer Start-->
    <div class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="container">
        <p class="navbar-text pull-left ">KREATIV TECH COPYRIGHT 2014</p>
        <a href="http:youtube.com"class= "navbar-button btn-danger btn pull-right">Subscribe on Youtube</a>
    </div> <!-- Footer Start-->

        <!-- jquery and javascript start script -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="js/bootstrap.js"></script> <!-- JS End Script-->
</body>
</html>

这是我的自定义CSS

    body {
padding-top: 51px;
padding-bottom:70px;    
}

.jumbotron{
    background: url(http://wowslider.com/images/demo/pinboard-fly/data/images/dock.jpg) no-repeat center center; 
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;

}
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
.jumbotron{
    background: url(http://wowslider.com/images/demo/pinboard-fly/data/images/dock.jpg) no-repeat center center; 
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    }
}

每次添加填充底部时都无法响应：200px，因为图像不会显示实际高度。

Answer 1

简单！使用background-size:100%;

DEMO

.jumbotron {
            background: url(http://wowslider.com/images/demo/pinboard-fly/data/images/dock.jpg) no-repeat center center;
            -webkit-background-size: 100% 100%;
            -moz-background-size: 100% 100%;
            -o-background-size: 100% 100%;
            background-size:100%;
        }

希望这可能有用！

Jumbotron帮助响应

1 个答案:

DEMO