Многослойный адаптивный background, как реализовать?

Question

Посетила идея делать многослойный адаптивный 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. Спасибо за мысли!

Answer 1

Вижу цель - не вижу препятствий!

body {
  margin: 0;
  height: 100vh;
  background-color: rgba(255, 255, 255, 1);
  background-image: linear-gradient(#fa08, #fa08), linear-gradient(#f408, #f408),
    linear-gradient(#0808, #0808), url("https://i.stack.imgur.com/m9NKc.png"),
    radial-gradient(#fff8, #000f);
  background-position: 0% 0%, 100% 0%, 0% 100%, 0% 0%, 0% 0%;
  background-size: 47.5% 47.5%, 47.5% 47.5%, 100% 47.5%, auto, auto;
  background-repeat: no-repeat;
}
@media only screen and (max-width: 375px) and (orientation: portrait) {
  body {
    background-position: 0% 0%, 0% 50%, 0% 100%, 0% 0%, 0% 0%;
    background-size: 100% 30%, 100% 30%, 100% 30%, auto, auto;
  }
}

БЛОГ НА HUSL

Многослойный адаптивный background, как реализовать?

Ответы (1 шт):