Propriedade CSS background-origin
Exemplo
Deixe a imagem de fundo começar no canto superior esquerdo do conteúdo:
#example1 {
border: 10px dashed black;
padding:
25px;
background: url(paper.gif);
background-repeat: no-repeat;
background-origin:
content-box;
}
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A background-origin
propriedade especifica a posição de origem (a área de posicionamento de fundo) de uma imagem de fundo.
Nota: Esta propriedade não tem efeito se o anexo em segundo plano for "fixo".
Valor padrão: | caixa de estofamento |
---|---|
Herdado: | não |
Animavel: | não. Leia sobre animáveis |
Versão: | CSS3 |
Sintaxe JavaScript: | object .style.backgroundOrigin="content-box" |
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
Property | |||||
---|---|---|---|---|---|
background-origin | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
Sintaxe CSS
background-origin: padding-box|border-box|content-box|initial|inherit;
Valores de propriedade
Value | Description | Play it |
---|---|---|
padding-box | Default value. The background image starts from the upper left corner of the padding edge | |
border-box | The background image starts from the upper left corner of the border | |
content-box | The background image starts from the upper left corner of the content | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Mais exemplos
Exemplo
Defina duas imagens de fundo para um elemento <div>. Deixe a imagem de fundo "paper.gif" começar no canto superior esquerdo da borda de preenchimento e deixe a imagem de fundo "img_tree.gif" começar no canto superior esquerdo do conteúdo:
#example1 {
border: 10px dashed black;
padding: 25px;
background: url(img_tree.gif), url(paper.gif);
background-repeat: no-repeat;
background-origin:
content-box, padding-box;
}
Páginas relacionadas
Tutorial CSS: Fundos CSS
Referência HTML DOM: propriedade backgroundOrigin