Html background image растянуть: Как растянуть фон на всю ширину окна?

html — CSS растянуть или подогнать фоновое изображение

спросил 8 лет, 6 месяцев назад

Изменено 5 лет, 1 месяц назад

Просмотрено 39 тысяч раз

Я хотел растянуть или подогнать фоновое изображение с помощью css, чтобы оно всегда имело 100% ширины и высоты независимо от размера экрана. Об этом спрашивают много раз, и все предлагают использовать background-size:100%, и это сработает. но использование размера фона соответствует только ширине моего изображения, а высота все еще обрезается.
Буду признателен, если кто-нибудь поможет мне с этим.
Чем очень

• html
• css

РЕДАКТИРОВАТЬ:

Вы пробовали background-size: 100% ,
CSS интерпретирует это как 100% ширины, автоматическая высота , что будет выглядеть так:

 background-size: 100% авто;
 

Вы хотите, чтобы второй аргумент (высота) тоже был равен 100%, поэтому вы должны сделать следующее:

 background-size: 100% 100%;
 

КОНЕЦ РЕДАКТИРОВАНИЯ

Попробуйте:

 размер фона: обложка;
 

Это будет соответствовать ширине или высоте и переполнит остальные

Или:

 background-size: contains;
 

Это сделает изображение максимально большим без изменения его соотношения сторон.

Подробнее о свойстве background-size css3 можно прочитать ЗДЕСЬ

4

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

 background: url('URL вашего изображения') 100%;
 

или

 background: url('URL вашего изображения') 100% без повторов;
 

Попробуйте следующее правило CSS:

 background-repeat: no-repeat;
background-attachment: прокрутка;
background-position: по центру по центру
размер фона: обложка; // это делает img полноэкранным (во всю ширину и во всю высоту)
 

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

html — Фоновое изображение растягивается на 100% по высоте Div

спросил 10 лет, 6 месяцев назад

Изменено 7 лет, 10 месяцев назад

Просмотрено 62к раз

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

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

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

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

 

  
Это короткий контейнер

<дел>
  
Это

высокий
контейнер

 background-size: auto 100%;
 

 крышка