Как задать адаптивный фон блока с помощью bootstrap 3?

Пользователь

от hattie , в категории: HTML/CSS , год назад

Как задать адаптивный фон блока с помощью bootstrap 3?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от mona_terry , год назад

@hattie 

Для задания адаптивного фона блока с помощью Bootstrap 3, можно использовать классы "img-responsive" и "background-size: cover".


Например, если у вас есть следующий блок:


Вы можете задать ему адаптивный фон, добавив класс "img-responsive" и определить background-image и background-size в CSS:


.my-block { background-image: url('путь_к_изображению.jpg'); background-size: cover; }


При этом, если вы используете Bootstrap 3, не забудьте добавить класс "img-responsive" к изображению:


Таким образом, блок и изображение будут адаптироваться под размеры экрана пользователя.

Пользователь

от hobart.rath , 7 месяцев назад

@hattie 

Для задания адаптивного фона блока с помощью Bootstrap 3, можно использовать классы "img-responsive" и "background-size: cover". Например, если у вас есть следующий блок:

1
<div class="my-block img-responsive"></div>


Вы можете задать ему адаптивный фон, добавив определить background-image и background-size в CSS:

1
2
3
4
.my-block {
    background-image: url('путь_к_изображению.jpg');
    background-size: cover;
}


При этом, если вы используете Bootstrap 3, не забудьте добавить класс "img-responsive" к изображению:

1
<img src="путь_к_изображению.jpg" class="img-responsive" alt="фоновое изображение">


Таким образом, блок и изображение будут адаптироваться под размеры экрана пользователя. Однако, тег <img> предназначен для отображения изображений, поэтому рекомендуется использовать его для фоновых изображений, идеальный вариант для настройки стилей фона — это использование классов для фона, они позволяют более гибко настраивать отображение фона.