Блог

Главная - Вопросы по программированию - Есть ли способ расположить центр фонового изображения в точных координатах?

Есть ли способ расположить центр фонового изображения в точных координатах?

#html #css #coordinates #background-image #background-position

#HTML #css #координаты #background-image #background-position

Вопрос:

У меня есть фоновое изображение в теле, обычный круг svg.

При background-position: 0%, 0% этот круг появляется в верхнем левом углу страницы. Но я хочу, чтобы центр этого круга был точно на 0,0 (верхний левый угол) и оставался там, независимо от ширины устройства.

Я могу вручную центрировать его с отрицательными процентами или пикселями или em / rem, но он не остается там, когда я меняю ширину браузера.

Кто-нибудь может помочь?

Вот ссылка из codepen.io : https://codepen.io/sandro-bochorishvili/pen/KKMjezN

Фактический код: css

 body {
  overflow-y: scroll;
  height: 100vh;
  background-color:  hsl(185, 75%, 39%);
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(https://svgshare.com/i/Rfg.svg),
                    url(https://svgshare.com/i/RgK.svg);
  background-position: -20rem -34rem, 72em 15em;

  background-repeat: no-repeat, no-repeat;
  padding: 0 2em 0 2em;
}

Комментарии:

1. Если вы укажете смещение в пикселях, оно не должно перемещаться. Можете ли вы добавить фрагмент текста?

2. Правильно, предполагая background-size , что установлено значение cover , изображение может растягиваться по оси X или Y (или по обеим) в зависимости от доступного пространства. Однако существует множество способов сделать это, поэтому нам понадобится реальный пример, чтобы предложить наиболее жизнеспособное решение.

3. Спасибо за ответ! На самом деле я понял это, но мне нужно то же самое в правом нижнем углу, но это сложно, пиксели не работают, круг перемещается вправо и исчезает с экрана (при уменьшении ширины)

4. Вот ссылка из codepen.io : codepen.io/sandro-bochorishvili/pen/KKMjezN

Ответ №1:

Чтобы объединить относительные и абсолютные размеры, которые вы можете использовать calc , в вашем случае это будет background-position: -20rem -34rem, calc(100% 20rem) calc(100% 34rem); 

 body {
  overflow-y: scroll;
  height: 100vh;
  background-color:  hsl(185, 75%, 39%);
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(https://svgshare.com/i/Rfg.svg),
    url(https://svgshare.com/i/RgK.svg);
 background-position: -20rem -34rem, calc(100%   20rem) calc(100%   34rem);

  background-repeat: no-repeat, no-repeat;
  padding: 0 2em 0 2em;
}
Метки: