Div 内的 Twitter Bootstrap 响应式背景图像 [英] Twitter Bootstrap Responsive Background-Image inside Div

问题描述

我如何修改 #bg 图像，使其在所有浏览器中都具有响应性、可调整大小和比例?

HTML:

 
<div class="row"><div class="col-md-2"></div><div class="col-md-8 col-sm-6 col-xs-12 well" id="bg">
<div class="col-md-2"></div>

CSS:

@import url('bootstrap.min.css');身体{背景: url('../img/bg.jpg') 无重复中心固定；-webkit-background-size: 封面；-moz-background-size: 封面；-o-背景尺寸:封面；背景尺寸:封面；保证金最高:12%；}#bg{背景:url('../img/con_bg4.png') 无重复中心；高度:500px；}

解决方案

我找到了解决方案.

background-size:100% auto;

How i can modify #bg image so it would be responsive, resizable and proportional in all browser?

HTML:

 <div class="container">
       <div class="row">
          <div class="col-md-2"></div>

            <div class="col-md-8 col-sm-6 col-xs-12 well" id="bg">

               </div>

            <div class="col-md-2"></div>
       </div>
  </div>

css:

@import url('bootstrap.min.css');

body{
    background: url('../img/bg.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top: 12%;    
}

#bg{
    background:url('../img/con_bg4.png') no-repeat center center;
    height: 500px;
}

解决方案

I found a solution.

background-size:100% auto;

这篇关于Div 内的 Twitter Bootstrap 响应式背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！