如何将图像集中在引导程序包装器上

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

与背景图像规则相比，您将更多地使用背景规则。通过速记，如果图像由于没有互联网连接而无法加载，您将能够控制其背景颜色，还可以控制是否希望图像重复、滚动或保持固定等。

试试这个：

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

请参阅演示