Как правильно реализовать загрузку заднего фона на сайте с соответствие с расширением монитора посетителя?
То есть выбрать нужное изображение для конкретного расширения.
Сайт на php.
Как правильно реализовать загрузку заднего фона на сайте с соответствие с расширением монитора посетителя?
То есть выбрать нужное изображение для конкретного расширения.
Сайт на php.
Думаю здесь помогут медиа-запросы.
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");
}
}
<!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% фон будет занимать всю ширину окна (не экрана)
поправил метки, тут все таки в основном 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+')');
}