• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Растянуть фон изображение на ширину экрана (Идеальное фоновое изображение для полной страницы на CSS)
Растянуть фон изображение на ширину экрана
Kosten
Дата: Воскресенье, 2019-05-05, 00:23 | Сообщение 1
Оффлайн
Администраторы
Сообщений:24946
Награды: 57


Для этого рассмотрим 2 разных метода, где можно сделать идеальное фоновое изображение для полной страницы. Для того, чтоб корректно изменить размер фонового изображения, чтоб все было пропорционально, то здесь подключаем CSS. Безусловно можем сделать исключительно через CSS благодаря background-size свойству на CSS3.

Также задействуем html элемент, где лучше чем body, так как он всегда, по крайней мере идет корректно по всем сторонам браузера. А значит выставляем фиксированный и центрированный фоновый рисунок, затем корректируем его размер, где задействуем background-size.



Код
html {
  background: url(Ссылка на фон страницы) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Один из довольно простых способов справиться с этим - поместить встроенное изображение на страницу, зафиксировать его в левом верхнем углу и задать минимальную ширину и минимальную высоту 100%, сохранив соотношение сторон.

HTML

Код
<img src="Ссылка на фон" id="nudeklos" alt="">

CSS

Код
#nudeklos {
  position: fixed;
  top: 0;
  left: 0;
    
  /* Сохранить соотношение сторон */
  min-width: 100%;
  min-height: 100%;
}

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

HTML

Код
<div id="kedapedonsab">
  <img src="Ссылка на фон" alt="">
</div>


CSS

Код
#kedapedonsab {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
}
#kedapedonsab img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}
Прикрепления: 5343405.png(87.6 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Растянуть фон изображение на ширину экрана (Идеальное фоновое изображение для полной страницы на CSS)
  • Страница 1 из 1
  • 1
Поиск: