Устранить пробелы рядом с фоновым изображением

Question

У меня есть элемент с фоновым изображением, для которого установлены следующие свойства:

#background-element {
   background: url("../background.jpg") top right no-repeat;
   background-position: right -350px top;
}

Он расположен в правом верхнем углу экрана и смещен на -350 пикселей к выровняйте изображение для лучшего потока с содержимым.

Это работает и выглядит великолепно, пока порт представления не достигнет определенного размера, и затем я получу пробел в левой части экрана.

I я не хочу использовать background-size: cover;, потому что я не хочу, чтобы изображение уменьшалось при уменьшении размера порта просмотра.

Что можно сделать, чтобы изображение было привязано вправо, отклонено на -350px и удалите пробелы, когда порт вида проходит определенную ширину.

Answer 1

Пробел происходит от цвета фона за просвечивающим изображением.

Если бы у вас было body {background-color: green}, пространство сбоку было бы зеленым. Вы переместили изображение на -350 пикселей справа от элемента (то же самое, что и left 350px) и сказали, чтобы изображение не повторялось. Поэтому, когда экран шире ширины изображения - 350 пикселей, вы получите цвет позади изображения. .

Если вы хотите, чтобы изображение масштабировалось, вы должны будете использовать свойство background-size, например cover. Если изображение не должно масштабироваться в какой-то момент. Тогда вы бы использовали Media Query, чтобы указать это.

/* normal */
#background-element {
   background: url("../background.jpg") top right no-repeat;
   background-position: right -350px top;
   background-size: cover;
}

/* if the screen is smaller than 600px then do this */
@media screen and (max-width: 600px) {
   #background-element {
      background-size: 100%;
   }
}