Как добавить отступы к центрированному фону-изображение на элементе html

#html #css #background #background-image

#HTML #css #фон #background-изображение

Вопрос:

Прямо сейчас я делаю это:

 html {
  width: 100%;
  height: 100%;
  background: url(/icon.png) center center no-repeat;
  box-sizing: border-box;
  background-origin: content-box;
  padding: 100px;
}

Допустим, изображение имеет размер 3000×1500 пикселей. Я бы хотел, чтобы оно было центрировано с отступом в 100 пикселей и уменьшало изображение, чтобы оно помещалось в центр (по вертикали и горизонтали). Прямо сейчас отступ ничего не делает, и изображение обрезается, потому что оно слишком большое, я думаю. Я также не хочу использовать <img> элемент, используя только background-image в CSS.

Ответ №1:

Вы можете рассмотреть фон элемента body, затем вы устанавливаете другой фон в html, чтобы избежать распространения фона и некоторых нежелательных ^{эффектов1. Затем вы можете настроить background-size масштабирование фона.}

Использование cover :

 body {
  height: 100%;
  background: url(https://picsum.photos/1200/1200?image=0) center/cover no-repeat;
  box-sizing: border-box;
  background-origin: content-box;
  background-clip: content-box; /*don't show on the padding*/
  padding: 50px;
  margin:0;
}
html {
 background:#fff;
 height:100%;
}

Или 100% 100% (центрирование в этом случае будет бесполезным)

 body {
  height: 100%;
  background: url(https://picsum.photos/1200/1200?image=0) center/100% 100% no-repeat;
  box-sizing: border-box;
  background-origin: content-box;
  /*background-clip: content-box; no more needed*/
  padding: 50px;
  margin:0;
}
html {
 background:#fff;
 height:100%;
}

Также с contain

 body {
  height: 100%;
  background: url(https://picsum.photos/1200/1200?image=0) center/contain no-repeat;
  box-sizing: border-box;
  background-origin: content-box;
  /*background-clip: content-box; no more needed*/
  padding: 50px;
  margin:0;
}
html {
 background:#fff;
 height:100%;
}

¹ Первый код, примененный непосредственно к html:

Показать фрагмент кода

 html {
  height: 100%;
  background: url(https://picsum.photos/1200/1200?image=0) center/cover no-repeat;
  box-sizing: border-box;
  background-origin: content-box;
  background-clip: content-box; /*this will not work as expected*/
  padding: 50px;
}

1. @LancePollard чего ожидать? нет никого, кто хотя бы близко, что мы могли бы исправить?

2. Я не хочу каким-либо образом обрезать изображение или сжимать изображение. Я хотел бы уменьшить его, в идеале, без добавления какого-либо содержимого (т. Е. Каких-Либо дополнительных разделов).

3. Этот сжимает его: «Или используйте 100% 100% (центрирование в этом случае также будет бесполезным)»

Ответ №2:

Этот обновленный css может решить вашу проблему (я уверен, что это сработает для вас)

 html{
  margin:0px;
  padding:0px;
}
body{
  width: 100vw;
  height: 100vh;
  background: url(https://picsum.photos/1200/1200?image=0) center center no-repeat;
  box-sizing: border-box;
  background-origin: content-box;
  background-clip: content-box;
  background-size:calc(100% - 100px) calc(100% - 100px);
  margin:0px;
}