Отзывчивое фоновое изображение в div полной ширине

Я пытаюсь понять, как сделать фоновое изображение в полной ширине и реагировать. Фоновое изображение расширяется по ширине страницы (и реагирует), но высота изображения не является его полной высотой. Кажется, что он как-то отключен. Я использую платформу bootstrap, и причина, по которой я пытаюсь это сделать, - это наложить некоторый текст на изображение. Я пробовал так много разных вещей, но не могу понять, помогите!

<div class="bg-image">
  <div class="container">
    <div class="row-fluid">
      <div class="span12">
        <h1>This is some text</h1>
      </div>
    </div>
  </div>
</div>


  .bg-image {
  background: url(img/image.jpg) no-repeat center top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  max-height: 450px;
  }

Ответ 1

Вот один из способов получения дизайна, который вы хотите.

Начните со следующего HTML:

<div class="container">
    <div class="row-fluid">
        <div class="span12">
            <div class="nav">nav area</div>
            <div class="bg-image">
                <img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg">
                 <h1>This is centered text.</h1>
            </div>
            <div class="main">main area</div>
        </div>
    </div>
</div>

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

Примените следующий CSS:

.bg-image {
    position: relative;
}
.bg-image img {
    display: block;
    width: 100%;
    max-width: 1200px; /* corresponds to max height of 450px */
    margin: 0 auto;
}
.bg-image h1 {
    position: absolute;
    text-align: center;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
}
.nav, .main {
    background-color: #f6f6f6;
    text-align: center;
}

Как это работает

На изображении установлено регулярное содержимое потока с шириной 100%, поэтому он будет быстро реагировать на ширину родительского контейнера. Однако вы хотите, чтобы высота была не более 450 пикселей, что соответствует ширине изображения 1200 пикселей, поэтому установите максимальную ширину изображения на 1200 пикселей. Вы можете сохранить изображение в центре с помощью display: block и margin: 0 auto.

Текст окрашивается над изображением, используя абсолютное позиционирование. В простейшем случае я растягиваю элемент h1 как полную ширину родительского элемента и использую text-align: center для центрирования текста. Используйте верхние или нижние смещения, чтобы поместить текст там, где это необходимо.

Если ваши изображения баннеров будут меняться в соотношении сторон, вам нужно будет динамически изменять максимальное значение ширины для .bg-image img с помощью jQuery/Javascript, но в остальном этот подход может многое предложить.

См. демонстрацию по адресу: http://jsfiddle.net/audetwebdesign/EGgaN/

Ответ 2

Когда вы используете background-size: cover, фоновое изображение автоматически растягивается, чтобы покрыть весь контейнер. Тем не менее, сохраняется соотношение сторон, поэтому вы всегда теряете часть изображения, если соотношение сторон изображения и элемента, к которому он применяется, идентичны.

Я вижу два способа решения этой проблемы:

Сделайте не поддерживать соотношение сторон изображения, установив background-size: 100% 100% Это также сделает изображение весь контейнер, но соотношение не будет поддерживаться. Недостаток заключается в том, что это искажает ваш образ и поэтому может выглядеть очень странно, в зависимости от изображения. С изображением, которое вы используете в скрипке, я думаю, вы могли бы с ним справиться, хотя.
Вы также можете вычислить и установить высоту элемента с помощью javascript на основе по его ширине, поэтому он получает такое же отношение, как и изображение. Эта расчет должен выполняться при загрузке и изменении размера. Должен быть достаточно легко с несколькими строками кода (не стесняйтесь спрашивать, хотите ли вы пример). Недостатком этого метода является то, что ваша ширина может стать очень мала (на мобильных устройствах) и, следовательно, вычисленная высота также, что может привести к переполнению содержимого контейнера. Эта могут быть решены путем изменения размера содержимого, а также что-то, но это добавляет некоторую сложность решению /

Ответ 3

Я также пробовал этот стиль для фона с ионным гибридным приложением. это также имеет стиль для эффекта размытия фона.

.bg-image {
   position: absolute;
   background: url(../img/bglogin.jpg) no-repeat;
   height: 100%;
   width: 100%;
   background-size: cover;
   bottom: 0px;
   margin: 0 auto;
   background-position: 50%;


  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);

}