Масштабирование фона

Question

Есть фоновая картинка с основным контентом справа, по дизайну ее необходимо сдвинуть слева на 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>

Answer 1

Если она должна быть прижата к правому краю на определенном расстоянии от него, то напишите вместо сдвига слева сдвиг справа 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>

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

Answer 2

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

/* Только для примера */ 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>

БЛОГ НА HUSL

Масштабирование фона

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