background-origin
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
A propriedade CSS background-origin
define a área de posicionamento do plano de fundo, isto é, a ponto de origem de uma imagem específica usando a propriedade background-image
.
Experimente
Note que background-origin
é ignorado quando background-attachment
é fixed
.
Nota: A taquigrafia background
redefine o valor desta propriedade para seu valor inicial se esta não foi específicada.
Sintaxe
/* Valores chave */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;
/* Valores globais */
background-origin: inherit;
background-origin: initial;
background-origin: unset;
A propriedade background-origin
é especificada por uma chave de valores listadas abaixo.
Valores
border-box
-
O plano de fundo é posicionado relativamente nas bordas do elemento.
padding-box
-
O plano de fundo é posicionado relativamente no espaçamento do elemento.
content-box
-
O plano de fundo é posicionado relativamente para o conteúdo do elemento.
Sintaxe formal
Exemplos
.exemplo {
border: 10px double;
padding: 10px;
background: url("image.jpg");
background-position: center left;
background-origin: content-box;
}
#exemplo2 {
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("mainback.png"); /* Applies two images to the background */
background-position:
top right,
0px 0px;
background-origin: content-box, padding-box;
}
Especificações
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # the-background-origin |
Compatibilidade com navegadores
BCD tables only load in the browser