» »

Растянуть background на всю ширину с помощью CSS

Растянуть background на всю ширину с помощью CSS

Здесь как можно подробнее разберем. как можно реализовать фон (background) интернет ресурса, что должен покрывать все рабочее пространство. Основном все делается на CSS3, также можно подключить jQuery и даже PHP, но рассмотрим один вариант, который на чистом CSS. Для начало нужно понять или определить, что должно получится. Это безусловно, полноценная заливка окна фоном или изображением, чтоб не было не каких пробелов.

Где будем растягивать картинку, так чтоб она смотрелось корректно, так как если идет фон под одним оттенком цвета, с ним легче работать. Не забываем про соответствие картинка на ее пропорций. И обязательно должно получится, что изображение установилось по центру. Что главное, все должно быть максимально кроссбраузерно и понятное дело, без различных махинаций с flash.

Метод CSS3 background


Это метод самый распространенный, что может растянуть background на чистом CSS, и все благодаря одному свойству, под названием background-size, что только будет присутствовать в CSS3.

Здесь изначально создадим background фиксированным и выставим его по центру, что останется его только растянуть, где подключаем свойства background-size, это все идет под ссылку на фон.

В общим ориентируемся с блоком которому присваиваем стили и дописываем в файле стилей этому блоку, следующий код:

Код
body{
  background: url(http://zornet.ru/Aben/ABGDA/artunsa.png) no-repeat center top fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Как можно заметить, что параметр background, где изначально добавляем путь на картину, где происходит установка положение изображение в соответствие окна экрана. Если разбирать, то значение center и top отвечает за центр и прижатие по всем сторонам, чтоб не было пробелов. Чтоб понятно было, то значение fixed - отвечает за функцию фиксаций.

Метод совсем обычный, что применяю постоянно и он меня устраивает на все 100% процентов.

Еще один способ:

Еще один обычный метод воплотить наверное, вставить картину на страницу. Она станет обладать фиксированную позицию и будет размещена в верхнем левом углу. Мы присвоим ей min-width и min-height 100%. Еще необходимо заблаговременно приготовить картину, в намерении пропорциональности сторон.
Код
<img src="http://zornet.ru/Aben/ABGDA/IfeTSxC8.png" id="zornet_ru" alt="">


CSS
Код
#zornet_ru {
  position:fixed;
  top:0;
  left:0;  
  min-width:100%;
  min-height:100%;
}

Здесь как можно заметить, что этот код не центрирует background image, что можно быстро все сделать как нужно, а точнее фиксировать изображение с помощью взятия ее в div.

Код
<div id="zornet_ru">
  <img src="http://zornet.ru/_ld/83/s23416005.jpg" alt="">
</div>

CSS

Код
#zornet_ru {
  position:fixed;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
}
#zornet_ru img {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  min-width:50%;
  min-height:50%;
}

На этом все, здесь представлены не все способы, а те, которые больше пременяют.

Также небольшое видео, где все понятно объясняют по как при помощи CSS растянуть фон на весь экран.



PS - если у вас есть свои наработки, хотя здесь должно все одинаково быть. то плиз в комментариях поделитесь с ними.
06.12.2017 Просмотров: 267 Комментарий: (3)

Поделиться в социальных сетях

Материал разместил

Комментарий: 3
waak
waak 06.12.2017 00:121
+1
Нет свои наработок но есть маленький совет
используя position:fixed;
нужно указывать z-index
иначе возникнут проблемы с позицией других элементов
Kosten
Kosten 06.12.2017 00:192
0
waak, за совет от души. Но когда собирался делать тему, то нужно было материалу как можно больше изучить. Так идет на CSS3, но основном делаем на чистых стилях CSS.

Но также можно и на PNP. что тоже хотел поделится. но подумал. что но стилях лучше и проще пока нет. Но есть как видим и на img, но это больше под отдельные страницы.
XemorDio
XemorDio 06.12.2017 15:473
0
Полезный материал
avatar