Разный фон сайта для десктопа и мобильного

Всем привет!

Cтояла задача сделать разный фон для мобильной версии сайта и десктопной.

сделали следующее.

Вот кусок кода из файла стилей, который я сделал на одном сайте.

body{……background:url(/image/catalog/back1.png);background-repeat:repeat;background-attachment: fixed;}
@media (max-width: 768px) {
body {
background-color: #dddddd;
background-image: url(«data:image/svg+xml,%3Csvg width=’42’ height=’44’ viewBox=’0 0 42 44′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cg id=’Page-1′ fill=’none’ fill-rule=’evenodd’%3E%3Cg id=’brick-wall’ fill=’%239C92AC’ fill-opacity=’0.41’%3E%3Cpath d=’M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z’/%3E%3C/g%3E%3C/g%3E%3C/svg%3E»);
}
}

Что сделали:

  1. Был обычный файл с картинкой в качестве фона:

background:url(/image/catalog/back1.png);background-repeat:repeat;background-attachment: fixed;}

все просто и понятно.

2. Далее добавили условие @media, которое показывает другую картинку, когда ширина экрана меньше 768 px (или как вам надо).

вот этот кусок:

@media (max-width: 768px) {
body {
background-color: #dddddd;
background-image: url(«data:image/svg+xml,%3Csvg width=’42’ height=’44’ viewBox=’0 0 42 44′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cg id=’Page-1′ fill=’none’ fill-rule=’evenodd’%3E%3Cg id=’brick-wall’ fill=’%239C92AC’ fill-opacity=’0.41’%3E%3Cpath d=’M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z’/%3E%3C/g%3E%3C/g%3E%3C/svg%3E»);
}
}

Вместо картинки у меня указан цвет фона, и код SVG картинки (это кирпичики), который легче отдельного файла и не надо лишний раз загружать контент на страницу со стороннего источника).

Вот интересный ресурс с хорошей коллекцией SVG обоев для вашего сайта и выбора картинок фона в формате SVG (оттуда и свой брал) http://www.heropatterns.com/

Upd: еще один интересный ресурс с паттернами и иконками.

https://www.flaticon.com

Всем добра и чтоб росла борода!))))

Поделиться ссылкой: