Exemplo
Deixe que a imagem de fundo começar a partir do canto superior esquerdo do conteúdo:
#example1
{
background:url(img_flwr.gif);
background-repeat: no-repeat;
padding:35px;
background-origin: content-box;
}
Tente você mesmo " Definição e Uso
A propriedade background-origem especifica onde a imagem de fundo está posicionado.
Note: Se a propriedade background-attachment é definido para "fixed" , esta propriedade não tem efeito.
| Valor padrão: | padding-box |
|---|---|
| Herdado: | no |
| Animatable: | no. Read about animatable |
| Versão: | CSS3 |
| sintaxe JavaScript: | object .style.backgroundOrigin="content-box" Try it |
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
| Propriedade | |||||
|---|---|---|---|---|---|
| background-origin | 4.0 | 9 | 4.0 | 3.0 | 10.5 |
CSS Syntax
background-origin: padding-box|border-box|content-box|initial|inherit;Valores de propriedade
| Valor | Descrição | Jogue |
|---|---|---|
| padding-box | Valor padrão. A imagem de fundo começa a partir do canto superior esquerdo da borda estofamento | Jogue " |
| border-box | A imagem de fundo é iniciado a partir do canto superior esquerdo da fronteira | Jogue " |
| content-box | A imagem de fundo é iniciado a partir do canto superior esquerdo do conteúdo | Jogue " |
| initial | Define essa propriedade para o valor padrão. Leia sobre inicial | Jogue " |
| inherit | Herda essa propriedade do seu elemento pai. Leia sobre herdar |
Páginas relacionadas
Tutorial CSS3: CSS3 Fundos
HTML DOM de referência: backgroundOrigin property