0

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

1 ответ 1

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;
  }
}

2
  • на этой координатной картинке можно руками svg рисовать, я в 90% случаях именно так делаю 20 янв 2021 в 2:25
  • @MaximLensky: надо ещё наделать таких под другие задачи, с другой разметкой. Лень... :)
    – UModeL
    20 янв 2021 в 4:25

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.