Bootstrap 3 markup

Question

не могли бы вы помочь мне, как я могу реализовать следующее. Это мой HTML разметка:

<div class="container-fluid"> 
<div class="row"> 
    <div class="hidden-xs col-sm-3 col-md-2"> 
     <!--Navigation--> 
     ... 
    </div> 
    <div class="col-xs-12 col-sm-9 col-md-10"> 
     <img class="img-responsive" id="bg" src="img/about-us.jpg"> 
    </div> 
</div> 

мне нужно изображение внутри второй DIV быть твердый Backgound для этого DIV (без прокрутки, и изображение должно быть ВСЕГДА по центру).

Answer 1

С бутстрапом 3 есть класс для центрирования колонн

<div class="col-xs-12 col-sm-9 col-md-10 centered"> <img class="img-responsive" id="bg" src="img/about-us.jpg"> </div> 

Answer 2

Просто добавьте класс или идентификатор разметку второй DIV и связать его с изображением с помощью CSS. Что-то вроде этого:

HTML:

<div class="container-fluid"> <div class="row"> <div class="hidden-xs col-sm-3 col-md-2"> ... </div> <div class="col-xs-12 col-sm-9 col-md-10" id="img-box"></div> </div>

CSS:

#img-box { background-image: url(../img/about-us.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; }

Answer 3

<div class="container-fluid"> 
    <div class="row"> 
     <div class="hidden-xs col-sm-3 col-md-2"> 
     ... 
     </div> 
    <div class="col-xs-12 col-sm-9 col-md-10" id="img-div"></div> 
</div> 

#img-div{ 
background-image: url(img/about-us.jpg); 
background-position: center center; 
background-size: cover; 
}