Как дать bootstrap столбцы фоновые изображения?

Question

Мне просто интересно, как дать col в bootstrap фоновое изображение, чтобы оно отображалось только в этом столбце, а не на всей странице. Я пытаюсь сделать это, чтобы оставить прозрачную панель навигации, и только столбцы под ней будут иметь фоновый рисунок.

Answer 1

Сначала вам нужно дать col имя класса или идентификатор, например:

<div class="col-xs-3 myImage">

Вы можете поместить изображение в сам контейнер, используя приведенный ниже пример. В вашем css вы должны сначала убедиться, что изображение содержится в столбце, поэтому установите параметр max-width.

.myImage{
display:block;
max-width:100%; // change this is you need it to be smaller
background-image:url('yourimagefoldername/imagefilename.jpg');
background-size: cover; // contain might suite you better
background-position:center; // this can be change to top, bottom or wherever
}

Это почти все, что вам нужно сделать.