如何将图像置于 bootstrap 包装器的中心

Question

这是图片的一部分。

<!--Need to center the image on my class wrapper -->        
<div class="wrapper" id="mypic" style="background-image:url('desktop/banner.jpg' ); ">

     <div class="container-fluid" >

     <div class="row-fluid">
<div class="caption">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
      </div>
      </div>
    </div>

知道我该怎么做吗？

Answer 1

与 background-image 规则相比，您将更多地使用背景规则。通过 shorthand，您可以控制它的背景颜色，如果由于没有互联网连接而导致图像加载失败，您还可以控制是否希望图像重复、滚动或保持固定等.

试试这个：

.wrapper {      
    background:url('http://www.intrawallpaper.com/static/images/gradient-background.jpg') center center no-repeat fixed;
    background-size: cover;
}

See the DEMO

如何将图像置于 bootstrap 包装器的中心

How to center image on a bootstrap wrapper

css

background-image

twitter-bootstrap