Question

使用CSS和Bootstrap，我想添加一个背景图像，并在该图像上放置“登录”和“注册”按钮。到目前为止我的代码：

   <!--   Header starts here!  -->      
   <header id="section_header" class="navbar-fixed-top main-nav" role="banner">
    <div class="container">
        <div class="row"> 

            <div class="navbar-header ">

                    <a class="navbar-brand" href="index.html">
                        <img src="images/logo.jpg" alt="">
                    </a>
            </div><!--Navbar header End-->

             <!--==== Begin of Navbar Collapse==-->


        </div><!-- End row -->
    </div> <!-- End container -->       
</header> <!-- End header -->

 Here is my background image code and buttons[background image with login and register buttons][1]


<div style="background-image:url('images/loginbg.jpg');padding-bottom:    30%;background-size: cover;" class="wrapper">

        <div id="homebuttons" class="container">

            <!-- Login with a button -->
            <button style="top:170px; width:25%;"type="button" class="btn btn-info btn-lg sharp pull-right btn-group-vertical" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-lock"></span> | Login with SVAPP</button><br>

                <!--   Register with a button  -->       
                <br><br><a href="register.html"style="top:200px; width=25%" type="button" class="btn btn-info btn-lg sharp pull-right btn-group-vertical">       <span class="glyphicon glyphicon-lock"></span> | Register with SVAPP </a>
   </div><!-- End buttons container-->
   </div> <!-- End Background image-->

Answer 1

您只需在引导程序中预定义的img标记中添加class="img-responsive"即可。

Answer 2

您还可以尝试： background-size:cover

或

background-size:100%

或

background-size:100% 100%

如何使背景图像响应？

2 个答案: