Всем привет!
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»);
}
}
Что сделали:
- Был обычный файл с картинкой в качестве фона:
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
Всем добра и чтоб росла борода!))))