1

Есть фоновая картинка с основным контентом справа, по дизайну ее необходимо сдвинуть слева на 200px. Подвинул background-position: 200px 319px; Как сделать, чтобы при уменьшении экрана ее контент скрывался по слева, а правая оставалось основной? (Картинка должна быть прижата к правому краю, но при этом сдвинута от левого на 200px)

div {
  height: 100px;
  background: url(https://via.placeholder.com/50) no-repeat;
  background-position: left 200px top 0;
}
<div></div>

1
  • минимальный воспроизводимый пример 11 июл 2021 в 14:18

2 ответа 2

0

Запустите пример ниже и разверните на весь экран. Измените размер блока, ухватив его за правый нижний угол:

/* Только для примера */ body { margin: 0; min-height: 100vh; background-color: rgba(255, 255, 255, 1); background-image: url("https://i.stack.imgur.com/m9NKc.png"), radial-gradient(#fff8, #000f); background-position: 0% 0%; background-repeat: no-repeat; background-size: auto; display: flex; justify-content: space-around; align-items: center; }

.block {
  /* Обязательно */
  position: relative;
  background-image: url("https://i.stack.imgur.com/tWGMC.jpg");
  background-size: 0 0;
  overflow: hidden;
  /* Только для примера */
  width: 600px; height: 130px;
  padding: 1em; resize: both;
  font: bold 18px/1em sans-serif;
  text-shadow: 0 0 1px white, 0 0 3px white, 0 0 5px white;
  box-shadow: 0 0 0 3px #fa0;
}

.block::before {
  /* Обязательно */
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 200px; right: 0;
  z-index: -1;
  background-image: inherit;
  background-position: right top;
  background-repeat: no-repeat;
}
<div class="block">Есть фоновая картинка с основным контентом справа, по дизайну ее необходимо сдвинуть слева на 200px. Подвинул background-position: 200px 319px; Как сделать, чтобы при уменьшении экрана ее контент скрывался по слева, а правая оставалось основной? (Картинка
  должна быть прижата к правому краю, но при этом сдвинута от левого на 200px)</div>

1
  • 1
    Спасибо, это именно то, что было нужно 11 июл 2021 в 15:09
0

Если она должна быть прижата к правому краю на определенном расстоянии от него, то напишите вместо сдвига слева сдвиг справа background-position: right 20px top 319px; , как тут:

div {
  height: 100px;
  background: url(https://via.placeholder.com/50) no-repeat;
  background-position: right 20px top 0;
}
<div></div>

Это число справа может быть нулевым или отрицательным.

4
  • Картинка должна быть прижата к правому краю, но при этом сдвинута от левого на 200px 11 июл 2021 в 13:32
  • Поясните подробнее чем ответ не подходит, потому что ваш комментарий не противоречит ответу. Если картинка прижата к правому, то просто прижмите к правому, а слева будет как получится, например 200 при определенной ширине самой картинки.
    – user347472
    11 июл 2021 в 13:41
  • Я хочу, чтобы при уменьшении экрана отступ слева сохранялся 11 июл 2021 в 13:52
  • К примеру картинка шириной 1000px, экран 900px, картинка должна быть прижата к правому краю + отступ слева, т.е. размер образанной картинки 700px на экране 11 июл 2021 в 13:58

Ваш ответ

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

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