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 that you have read and understand our privacy policy and code of conduct.

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