Question

我的后台工作正常，1024X768px，但当响应位置变为768X1024时，我的背景没有延伸到页脚。在其他尺寸如480x320，反之亦然，我的背景垂直重复。当响应位置变为768X1024以及480c320时，我希望我的背景能够延伸。你能告诉我最好的解决方案吗？

我尝试使用它，但它无效。

@media only screen and (max-width:768px){

    .container .mybg {background-size:100%;}


}

*注意：需要剪掉一些内容。

这是我的代码：

<body>
     <div class="container">    
        <!--Background-->
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

            <div class="mybg">

                <div class="container"> 
                    <div class="row-fluid text-center">
                      <div class="col-sm-12">
                        <div class="img-thumbnail">
                          <img class="img-responsive center-block" src="images/winning 
                              logo.png" alt="...">
                                <div class="container">
                                  <div class="caption">
                                    <h5><a href="Portlogo.html">Logo Design</a></h5>        
                                  </div>

                                </div>


                        </div>  
                       </div>
                    </div>                                        
                </div>

            </div><!--END OF MYBG-->

        </div><!--END OF Background-->


    </div>

    <!--bacground pattern 2 underneath-->
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <img class="img-responsive center-block" src="images/BG-w-pattern_line_2.png">
    </div><!--END OF bacground pattern 2 underneath-->  

        <div class="container">
                <div class="footer">
                     <div class="container">
                          <p class="mytext-muted">Copyright &copy;  2014. All rights 
                              reserved. EGT Design.</p>
                     </div>
                </div>
            </div>




<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

CSS：

@media only screen and (max-width:768px){

.container .mybg {background-size:100%;}
}

.container .mybg{

background:url(../images/ContentBG.png);}

Answer 1

这应该有效

.container .mybg {
  -webkit-background-size: cover;
  -moz-background-size: cover;      
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

以响应大小垂直扩展背景

1 个答案: