Propriedade CSS background-origin

A propriedade CSS background-origin especifica a área de posicionamento do fundo — a caixa a partir da qual uma background-image é posicionada e começa a ser desenhada.

Todo elemento é construído a partir de três caixas aninhadas: a content box (onde ficam o texto e os elementos filhos), a padding box (conteúdo mais o padding) e a border box (a padding box mais a borda). O valor de background-origin define qual dessas caixas atua como ponto de origem (canto superior esquerdo) para a imagem e em relação a qual área o background-position é calculado.

Por padrão, uma imagem de fundo é posicionada em relação à padding box, ou seja, fica atrás do padding, mas sob a borda. Mudar para content-box puxa a imagem para dentro do padding; mudar para border-box permite que ela se estenda sob a borda. Use quando quiser alinhar precisamente uma imagem de fundo com o conteúdo, ou quando desejar posicioná-la abaixo (ou fora) da borda.

Não confunda com background-clip. background-origin define onde a imagem começa; background-clip define onde o fundo pintado é cortado (recortado). Eles utilizam as mesmas palavras-chave, mas respondem a perguntas diferentes e frequentemente são usados em conjunto.

A propriedade background-origin não tem efeito em um fundo fixed: se background-attachment for fixed, a imagem é posicionada em relação ao viewport e background-origin é ignorado. É uma das propriedades CSS3.

Valor Inicial	padding-box
Aplica-se a	Todos os elementos. Aplica-se também a ::first-letter e ::first-line.
Herdado	Não.
Animável	Não.
Versão	CSS3
Sintaxe DOM	object.style.backgroundOrigin = "content-box";

Sintaxe

Sintaxe da Propriedade CSS background-origin

background-origin: padding-box | border-box | content-box | initial | inherit;

Exemplo da propriedade background-origin:

Exemplo da Propriedade CSS background-origin com o valor padding-box

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example1 {
        border: 5px dashed #666;
        padding: 35px;
        background: url("/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg");
        background-repeat: no-repeat;
        background-origin: padding-box;
      }
    </style>
  </head>
  <body>
    <h2>Background-origin property example</h2>
    <p>Here the background-origin is set to "padding-box".</p>
    <div class="example1">
      <h2>Hello world.</h2>
      <p> Some text for example.</p>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Aqui está um exemplo mostrando a diferença entre padding-box e content-box.

Exemplo da propriedade background-origin com os valores "padding-box" e "content-box":

Exemplo da Propriedade CSS background-origin com os valores padding-box e content-box

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example1 {
        border: 5px dashed #666;
        padding: 35px;
        background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-repeat: no-repeat;
        background-origin: padding-box;
      }
      .example2 {
        border: 5px dashed #666;
        padding: 35px;
        background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-repeat: no-repeat;
        background-origin: content-box;
      }
    </style>
  </head>
  <body>
    <h2>Background-origin property example</h2>
    <p>Here the background-origin is set to "padding-box" which is the default value of this property.</p>
    <div class="example1">
      <h2>Hello  world</h2>
      <p> Some text for example.</p>
    </div>
    <p>Here the background-origin is set to "content-box".</p>
    <div class="example2">
      <h2>Hello  world</h2>
      <p> Some text for example.</p>
    </div>
  </body>
</html>

Experimente Você Mesmo »

No exemplo abaixo, veja como definir duas imagens de fundo para um elemento div com valores diferentes.

Exemplo da propriedade background-origin com valores diferentes:

Exemplo da Propriedade CSS background-origin com os valores content-box e border-box

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      #example1 {
        border: 5px double black;
        padding: 25px;
        background: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("/uploads/media/default/0001/02/aa55a168be25d7d121dcab8d67ad72ce021dcde3.png");
        background-repeat: no-repeat;
        background-origin: content-box, border-box;
      }
      #example2 {
        border: 5px double black;
        padding: 25px;
        background: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("/uploads/media/default/0001/02/aa55a168be25d7d121dcab8d67ad72ce021dcde3.png");
        background-repeat: no-repeat;
        background-origin: content-box, padding-box;
      }
      #example3 {
        border: 5px double black;
        padding: 25px;
        background: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("/uploads/media/default/0001/02/aa55a168be25d7d121dcab8d67ad72ce021dcde3.png");
        background-repeat: no-repeat;
        background-origin: content-box, content-box;
      }
    </style>
  </head>
  <body>
    <h2>Background-origin property example</h2>
    <p>Here the background-origin: content-box, border-box; is set:</p>
    <div id="example1">
      <h2>Hello World</h2>
      <p>The first background-image starts from the upper left corner of the content.</p>
      <p>The second background-image starts from the upper left corner of the border.</p>
    </div>
    <p>Here the background-origin: content-box, padding-box:</p>
    <div id="example2">
      <h2>Hello World</h2>
      <p>The first background image starts from the upper left corner of the content.</p>
      <p>The second background-image starts from the upper left corner of the padding edge.</p>
    </div>
    <p>Here the background-origin: content-box, content-box; is set:</p>
    <div id="example3">
      <h2>Hello World</h2>
      <p>Both background images start from the upper left corner of the content.</p>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Múltiplos fundos

Quando um elemento possui várias imagens de fundo separadas por vírgulas, é possível atribuir uma origem diferente a cada uma — os valores são mapeados para as imagens na ordem. No exemplo acima, background-origin: content-box, border-box; aplica content-box à primeira imagem e border-box à segunda. Se você fornecer menos valores do que imagens, o CSS repete a lista para preencher as imagens restantes.

Dicas e armadilhas

Sem efeito sem imagem de fundo. background-origin só muda onde uma imagem começa; não tem efeito sobre uma cor de fundo sólida. Para controlar onde uma cor é pintada, use background-clip.
Precisa de espaço para ser visível. Com padding zero e sem borda, a content box, a padding box e a border box coincidem, portanto os três valores parecem idênticos. O efeito só fica visível quando o elemento tem padding e/ou borda.
fixed o substitui. Como mencionado acima, background-attachment: fixed posiciona a imagem em relação ao viewport, o que desativa background-origin.
Combine com background-clip. Um padrão comum é background-origin: border-box; background-clip: padding-box; — a imagem é disposta a partir da borda, mas recortada na borda do padding.

Suporte nos navegadores

background-origin é suportado em todos os navegadores modernos — Chrome, Firefox, Safari, Edge e Opera. Nenhum prefixo de fornecedor é necessário para as versões atuais.

Valores

Valor	Descrição	Experimente
border-box	O background-position é relativo à border box e a background-image começa pelo canto superior esquerdo da borda.	Experimente »
padding-box	O background-position é relativo à padding box e a background-image começa pelo canto superior esquerdo da borda do padding. Este é o valor padrão.	Experimente »
content-box	O background-position é relativo à content box e a background-image começa pelo canto superior esquerdo do conteúdo.	Experimente »
initial	Define a propriedade com seu valor padrão.	Experimente »
inherit	Herda a propriedade do elemento pai.

Prática

O que a propriedade CSS background-origin controla?

A posição inicial de uma imagem de fundo especificada pela propriedade background.A localização da imagem ou cor de fundo em relação à border box, padding box ou content box do elemento.A resolução da imagem de fundo.A velocidade dos efeitos de transição de uma imagem de fundo.Ela atua em sinergia com outras propriedades como background-clip ou background-size.