Загрузка заднего фона на сайте в соответствии с расширением монитора

285

21 апреля 2017, 20:59

Как правильно реализовать загрузку заднего фона на сайте с соответствие с расширением монитора посетителя?

То есть выбрать нужное изображение для конкретного расширения.

Сайт на php.

Answer 1

Думаю здесь помогут медиа-запросы.

body { 
  background-image: url("http://www.fullhdoboi.com/wallpapers/thumbs/6/kartinka-apelsiny-1885.jpg"); 
  background-repeat: no-repeat; 
  background-size: cover; 
} 
 
@media (max-width: 960px) { 
  body { 
    background-image: url("http://www.sunhome.ru/i/wallpapers/200/planeta-zemlya-kartinka.960x540.jpg"); 
  } 
}

Answer 2

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <title>Растягиваемый фон</title> 
  <style> 
   body { 
    background: url(images/фон.png) no-repeat; /* Ваш фон тут */ 
    -moz-background-size: 100%; /* Firefox 3.6+ */ 
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */ 
    -o-background-size: 100%; /* Opera 9.6+ */ 
    background-size: 100%; /* Современные браузеры */ 
   } 
  </style> 
 </head> 
 <body> 
 </body> 
</html>

При использовании background-size: 100% фон будет занимать всю ширину окна (не экрана)

Answer 3

поправил метки, тут все таки в основном JavaScript нужен, так как php это серверная технология.

К примеру, выводите на php js объект или можно выводить как атрибут, к примеру как атрибут:

 <div class="bg" data-bg="для мобилки к примеру" data-bg-lg="ссылка на изображение для экранов от 1200 к примеру" data-bg-md="ссылка на изображение для экранов от 970"></div>

таким образом можно для любых разрешений, а затем на js обработчик, напишу с использованием jQuery, логика должна быть понятной все равно

$(window).on("load resize scroll",function(e){
     var width = $(window).width(),
         $blockBg = $('.bg'),
         image = $blockBg.attr('data-bg');
     if(width > 970 && width < 1200) {
         image = $blockBg.attr('data-bg-md');
     } 
     if(width > 1200) {
         image = $blockBg.attr('data-bg-lg');
     } 
     $blockBg.css('background', 'url('+image+')');
}