0

У страницы есть 3 фоновых картинки: самая верхняя , средняя, и нижняя. Первая картинка должна всегда полностью отображаться на экране - растягиваться под размер окна. Вторая и третья обрезаться (слева и справа), если экран слишком маленький, т.е. не должна растягиваться. Как лучше это осуществить?

1 ответ 1

1

Такой вариант?

body {
  display: block;
  width: 100%;
  height: 200vh;
  margin: 0;
  background:
    url('https://i.imgur.com/1B8pnOa.jpg') center top / 100vw 100vh,
    url('https://i.imgur.com/qdJuvYi.png') left 100vh / 50vw 100vh,
    url('https://i.imgur.com/nwwe3Hf.png') right 100vh / 50vw 100vh;
  background-repeat: no-repeat;
}

3
  • большое спасибо! @CbIPoK2513
    – pluto75
    8 июл 2020 в 6:10
  • @НадяЧелядинова, если мой ответ вам помог, поставьте галочку слева от ответа
    – De.Minov
    8 июл 2020 в 7:25
  • Хорошее решение. Возьму на заметку.
    – rabbit
    10 июл 2020 в 5:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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