Аварийное изображение загрузочного бутстрапа Jumbotron

Я использую bootstrap 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>

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

Ответы

Ответ 1

Самый простой способ - установить размер фона на "обложку".

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

Стив

Ответ 2

Это то, что я сделал.
Во-первых, просто переопределите класс 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;
}

Ответ 3

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

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

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

Ответ 4

TL;DR: используйте 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>

Ответ 5

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

<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>

Ответ 6

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

Ответ 7

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

.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 изменяет размер фонового изображения, чтобы покрыть весь контейнер, даже если ему нужно растянуть изображение или немного срезать один из краев.

Ответ 8

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

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

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