Фоновое изображение Stretch 100% Высота Div

У меня есть контейнер, который будет расти/уменьшаться по высоте в зависимости от того, сколько текста динамически размещено внутри него. Контейнер будет иметь фоновое изображение, которое необходимо растягивать/сжимать, поскольку контейнер меняет высоту, и это изображение невозможно обрезать каким-либо образом. Мне интересно, как бы я стиль .container, чтобы получить фоновое изображение на 100% от div.

Я пробовал следующее, но он, похоже, не работал:

.container { background: url('backgroundImage.jpg') 0 100% no-repeat; }

Пример структуры HTML:

<div class="container">
  <p class="text">This is a short container</p>
</div>

<div class="container">
  <p class="text">This<br> is<br> a<br> tall<br> container</p>
</div>

Ответы

Ответ 1

Вам нужно установить свойство background-size. background-size: 100% 100%; будет масштабировать его, чтобы заполнить контейнер как по горизонтали, так и по вертикали.

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

Ответ 2

В случае, если background-size: contain; не поможет, и если вы ищете полное фоновое изображение HEIGHT без потери пропорций, используйте ниже написанный CSS

background-size: auto 100%;

установка первого параметра на " авто" гарантирует, что изображение будет сохранять ширину в отношении текущей высоты. Второй параметр, который " 100%", поможет фоновому изображению изменить ту же высоту, что и DIV.

Ответ 3

Вы попробовали background-size: cover;?

В вашем примере вы настраиваете background-position.

Ответ 4

В css3 есть свойство в качестве фона-размера: обложка; и background-size: содержать;. Вы можете использовать background-size:cover; в соответствии с вашими потребностями.

** contain

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



cover

Указывает, что фоновое изображение должно быть масштабировано как маленькое возможно, хотя оба его размера больше или равны к соответствующим размерам области фонового позиционирования.

**