it-swarm.com.ru

Отзывчивый Bootstrap Jumbotron Фоновое изображение

Я использую загрузчик jumbotron, и в том числе фоновое изображение. Изменение размера экрана делает изображение мозаичным и повторяется, в то время как я хочу, чтобы изображение быстро изменяло размеры.

<div class="jumbotron" style="background-image: url(http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg); background-size: 100%;">
   <div class="container for-about">
   <h1>About</h1>
   </div>
</div>

Как бы вы сделали изображение адаптивным? Сайт ЗДЕСЬ . Спасибо за ваши идеи!

26
Nick B

Самый простой способ - установить размер фона на «cover»

.jumbotron {
  background-image: url("../img/jumbotron_bg.jpg");
  background-size: cover;
}

Стив

42
Steve

Это то, что я сделал .
Сначала просто переопределите класс jumbotron и сделайте следующее:

.jumbotron{
    background: url("bg.jpg") no-repeat center center; 
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
}

Итак, теперь у вас есть jumbotron с адаптивным фоном ....... Однако, как уже ответил Ирвин Жан, высота фона все еще не отображается правильно.

Одна вещь, которую вы можете сделать, это заполнить ваш div несколькими пробелами, такими как это:

<div class="jumbotron">
    <div class="container">
        About
        <br><br><br> <!--keep filling br until the height is to your liking-->
    </div>
</div>

Или, что более элегантно, вы можете установить высоту контейнера. Возможно, вы захотите добавить другой класс, чтобы не переопределять класс контейнера Bootstrap.

<div class="jumbotron">
    <div class="container Push-spaces">
        About
    </div>
</div>

.Push-spaces
{
    height: 100px;
}
7
Fadils

Я обнаружил, что это работает отлично для меня:

.jumbotron {
background-image: url(/img/Jumbotron.jpg);
background-size: cover;
height: 100%;}

Вы можете изменить размер экрана, и он всегда будет занимать 100% окна.

5
Justin

TLDR: Использовать background-size: 100% 100%;

background-size: cover; может отрезать некоторые части изображения, что приведет к плохим результатам.

Используя background-size: 100% 100%;, вы заставляете изображение принимать 100% родительского элемента как для height, так и width.

Смотрите W3Schools для получения дополнительной информации об этом.

Вот рабочее, отзывчивое jumbotron фоновое изображение:

<div class="jumbotron"  style="background-image: url(http://yourImageUrl.jpg); background-size: 100% 100%;">
    <h1>Welcome</h1>
    <p class="lead">Your message here</p>
    <p><a href="http://www.YourLinkHere.com" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>
3
maxshuty

Вот как я это делаю:

<div class="jumbotron" style="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;">
  <h1>Hello</h1>
</div>

3
JustRocca

К сожалению, нет способа заставить div высоту реагировать на размер фона . Самое простое решение, которое я использовал, - это добавление тега img в ваш jumbotron, который содержит это фоновое изображение. 

2
Irvin Zhan

Приведенный ниже код работает для всех экранов:

.jumbotron {
   background: url('backgroundimage.jpg') no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;
}

Свойство cover изменяет размер фонового изображения, чтобы покрыть весь контейнер, даже если ему нужно растянуть изображение или немного срезать один из краев.

1
Dhanesh Agrawal

Вы можете попробовать это: 

Просто поместите код в тег стиля в заголовке HTML-файла

<style>
        .jumbotron {
            background: url("http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg") center center / cover no-repeat;
        }
</style>

или поместите его в отдельный файл CSS, как показано ниже

        .jumbotron {
            background: url("http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg") center center / cover no-repeat;
        }

используйте center center для центрирования изображения по горизонтали и вертикали . используйте cover , чтобы изображение заполнило пространство jumbotron и, наконец, no-repeat , чтобы изображение не повторялось.

0
Joan