A background-originpropriedade define onde pintar o fundo: em todo o elemento, dentro da borda ou dentro do preenchimento.
Há quatro valores: border-box, padding-box, content-boxe inherit. Aqui está uma demonstração:
Veja a demonstração da origem do plano de fundo da caneta por Timothy Miller (@tjacobdesign) no CodePen.
background-origin é semelhante ao background-clip, exceto que redimensiona o fundo em vez de cortá-lo.
O exemplo acima foi background-size: covere background-repeat: no-repeattambém se aplica. Se não fosse esse o caso, a imagem se repetiria abaixo da borda ou preenchimento.
Relacionado
- anexo de fundo
- clipe de fundo
- cor de fundo
- imagem de fundo
- posição de fundo
- fundo de repetição
- tamanho do fundo
Mais recursos
- CSS3 Spec
- MDN
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 1+ | 3+ | 4+ | 10,5+ | 9+ | Funciona | Funciona |