CSS-свойство `background-origin`

background-origin — это свойство CSS, которое задаёт начало фона: от внешнего края рамки, внутри рамки или внутри внутреннего отступа.

Обратите внимание, что background-origin игнорируется, если background-attachment имеет значение fixed.

Попробуйте

background-origin: border-box;
background-repeat: no-repeat;

background-origin: padding-box;
background-repeat: no-repeat;

background-origin: content-box;
background-repeat: no-repeat;

<section id="default-example">
  <div id="example-element">This is the content of the element.</div>
</section>

#example-element {
  background-image: url("/shared-assets/images/examples/leopard.jpg");
  color: #d73611;
  text-shadow: 2px 2px black;
  padding: 20px;
  border: 10px dashed #333333;
  font-size: 2em;
  font-weight: bold;
}

Синтаксис

/* Keyword values */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

/* Global values */
background-origin: inherit;
background-origin: initial;
background-origin: revert;
background-origin: revert-layer;
background-origin: unset;

Значения

Это свойство задаётся одним из следующих ключевых слов:

border-box

Фон позиционируется относительно рамки.

padding-box

Фон позиционируется относительно внутреннего отступа. Значение по умолчанию.

content-box

Фон позиционируется относительно содержимого.

Формальное определение

Формальный синтаксис

background-origin = 
  <visual-box>#

<visual-box> = 
  content-box |
  padding-box |
  border-box

Примеры

Задание начала фона

.example {
  border: 10px double;
  padding: 10px;
  background: url("image.jpg");
  background-position: center left;
  background-origin: content-box;
}

#example2 {
  border: 4px solid black;
  padding: 10px;
  background: url("image.gif");
  background-repeat: no-repeat;
  background-origin: border-box;
}

div {
  background-image:
    url("logo.jpg"), url("main-back.png"); /* Applies two images to the background */
  background-position:
    top right,
    0px 0px;
  background-origin: content-box, padding-box;
}

Использование двух градиентов

В этом примере у блока толстая пунктирная рамка. Для первого градиента в качестве background-origin используется padding-box, поэтому фон располагается внутри рамки. Для второго используется content-box, поэтому он отображается только за содержимым.

.box {
  margin: 10px 0;
  color: white;
  background:
    linear-gradient(
      90deg,
      rgb(131 58 180 / 100%) 0%,
      rgb(253 29 29 / 60%) 60%,
      rgb(252 176 69 / 100%) 100%
    ),
    radial-gradient(circle, white 0%, black 28%);
  border: 20px dashed black;
  padding: 20px;
  width: 400px;
  background-origin: padding-box, content-box;
  background-repeat: no-repeat;
}

<div class="box">Hello!</div>

Спецификации

Совместимость с браузерами

См. также

• background-clip