» »

Адаптация фона сайта с использованием CSS


Адаптация фона сайта с использованием CSS

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

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

Для начала понадобятся два изображения-фона, первое изображение должно быть как минимум широкоформатным 1920*1080, этим мы добиваемся покрытия всей области просмотра на большинстве широкоформатных мониторов выпускаемых в настоящее время.

Второе изображение будет уменьшенной версией первого фонового изображения, но только для мобильных устройств. Допустим эти изображения будут иметь разрешения 1920*1080 и 768*480.
Второе изображение для уменьшения времени загрузки страницы на маленьких разрешениях экрана, и для этого мы будем использовать медиа запрос, чтобы получить уменьшенную версию фоновой картинки, хотя всё прекрасно работает и без этого.
Чтобы отредактировать фоновые картинки и уменьшить их вес, не буду учить, наверняка у всех есть закладки с такими сервис или умеете работать с фотошоп.

Ну и сам код, исходник скачал с иностранного сайта, но не трудно разобраться хоть комментарии на английском языке, не стал их стирать чтобы понятнее было:
CSS:
Код

body {
  /* Location of the image */
  background-image: url(images/background-photo.jpg);
   
  /* Image is centered vertically and horizontally at all times */
  background-position: center center;
   
  /* Image doesn't repeat */
  background-repeat: no-repeat;
   
  /* Makes the image fixed in the viewport so that it doesn't move when  
  the content height is greater than the image height */
  background-attachment: fixed;
   
  /* This is what makes the background image rescale based on its container's size */
  background-size: cover;
   
  /* Pick a solid background color that will be displayed while the background image is loading */
  background-color:#464646;
   
  /* SHORTHAND CSS NOTATION
  * background: url(background-photo.jpg) center center cover no-repeat fixed;
  */
}

/* For mobile devices */
@media only screen and (max-width: 767px) {
  body {
  /* The file size of this background image is 93% smaller
  * to improve page load speed on mobile internet connections */
  background-image: url(images/background-photo-mobile-devices.jpg);
  }
}


Вообщем разобравшись и поменяв ссылки к фонам на свои, можно удалить закомментированные участки кода.
Источник: GitHub
03.07.2016 Просмотров: 561 Комментарий: (17)

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

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

Комментарий: 17
Kosten
Kosten 03.07.2016 21:031
0
Angerfist, материал хороший, дай источник на его, чтоб прописать.
Angerfist
Angerfist 03.07.2016 21:062
0
Добавил
Kosten
Kosten 03.07.2016 21:103
0
Нормально, сам не знал эту тему, вот сижу изучаю.
tsakonter
tsakonter 03.07.2016 21:274
0
Что то не могу понять, а что фон тоже должен быть адаптирован, или что то путаю, это под мобильные устройства, или на всю ширину, так размера 1920*1080 хватит вполне, пока больше не изобрели. И вообще он должен исчезать по идее если размер слишком маленький, как смартфон.
Angerfist
Angerfist 03.07.2016 21:295
0
С этими стилями фон будет гибким, подстраиваться под разные разрешения экрана, при этом с сохранением пропорций и по центру.
Сафрон
Сафрон 03.07.2016 21:407
0
Вот, вот, хорошая информация, такой бы по больше, и потом самому можно адаптировать сайт. Вот хорошие стили под адаптацию, которые просто убирают часть дизайн, не знаю, где Костен его нарыл. но без этого стиля не как не обойтись.
Angerfist
Angerfist 03.07.2016 21:509
0
Так это не адаптация) это функция display: none; скрытие элемента, которая полностью убирает. А вот visibility: hidden; тоже скрывает но оставляет пустое место) Можно ещё через opacity скрывать) Кто во что горазд)
Kosten
Kosten 03.07.2016 22:1512
0
Прописал в самом материале, думаю многим пригодиться, этот стиль замутил в помощи по uCoz в блоге. Сам удивился что не послали на сайт фрилансера, где делают за деньги, а там сразу помогли и стиль с кодом выложили, что опробовал на сайте и много где прописан он, но основном на вид материале в кнопках. как сколько скачали или что за модуль, это как понимаю сильно на таких устройствах не нужно.
Angerfist
Angerfist 03.07.2016 21:386
0
И кстати уже давно есть разрешения 4096 × 3112, 3656 × 2664, 4096 × 1714, 3840 × 2160 и так далее, забываем про новое поколение 2К и 4К!
Kosten
Kosten 03.07.2016 21:468
0
Но у простого пользователя, хоть он и может купить себе с десяток, но для чего ему такие большие, все же делается для удобства, а не про то, что у кого круче, это в детском саде такое проходят, но у некоторых и по жизни этот шпик остается.
Angerfist
Angerfist 03.07.2016 21:5810
0
Да дело не в понтах, все тянутся к хорошей картинке и покупают уже мониторы с высоким разрешением, выше чем 1920*1080, и думаю их надо тоже учитывать
Kosten
Kosten 03.07.2016 22:0311
0
Это безусловно нужно учитывать, но пока все идет по стандартным расширением, возможно уже скоро будет, так это значит за ранее нужно все делать.
Angerfist
Angerfist 04.07.2016 14:5613
0
Kosten я не понимаю зачем я описываю материал своими слова, ты всё равно потом редактируешь, или вставка как сейчас про display:none в данном материале про фон к чему?, всё что касается адаптации взял бы собрал и вынес в отдельный материал.
Без обид, но когда видишь наскоряк отредактированный материал, думаешь может зря я, заняться мне больше не чем?)
Kosten
Kosten 04.07.2016 16:0014
0
Просто порекомендовали, близко по тематики ссылки прописывать в материале, буду в курсе, что твой материал не трогать.
Kosten
Kosten 04.07.2016 16:0515
0
Просто не проверил, думал вообще все скопировано, а сейчас проверил, что это ссылка перво источник описанию, это мой косяк, за что извиняюсь.
Angerfist
Angerfist 04.07.2016 16:3216
0
Всё нормально, я и сам погорячился...настроение сегодня мрачное) Редактируй если явные косяки, без этого никак) А новые материалы, да у тебя сайт по моему уже всё затронул, надо будет что нибудь на рнр придумать, зря учил что ли)
Kosten
Kosten 04.07.2016 16:3817
0
Бывает, тоже, нужно работать. заказы, но на улице гроза, а мне просто надоело менять модемы. Где то за 10 км, гроза пройдет, у меня можем горит. бывало и компьютером.)
На счет php и раздел есть.
avatar