Посетила идея делать многослойный адаптивный background. Сейчас имею следующее: CSS
html{
height: 100vh;
width: 100vw;
max-width: 100%;
background: center top url(/img/fon.jpg) no-repeat;
background-size: cover; }
и для адаптивности:
@media only screen and (width : 375px) and (orientation : portrait) {
html {
width: 100vw;
background: center top url(/img/fon_small.jpg) no-repeat;
background-size: cover; }
Но ЕСТЬ нюанс, фон многослойный. Голову сломал как сделать чтобы каждый слой двигался в свое место (выравнивался по левому, низ и т.п.), например:
а когда запускаю на мобильном, то получается примерно так:
Подскажите как подобное реализовать? При условии что фон рисуется в слоях в Photoshop. Спасибо за мысли!