Propriedade background-origin de CSS 3

A propriedade background-origin de CSS 3 permite decidir a posição da imagem de fundo em relação à borda , padding ou ao conteúdo do elemento.

Por Miguel Angel Alvarez - Tradução de Celeste Veiga


Publicado em: 31/7/10
Valorize este artigo:
CSS permite especificar que os elementos tenham um fundo com uma imagem e além disso, com alguns atributos como background-position ou background-repeat, podemos definir coisas como transferir a posição da imagem de fundo para outro lugar ou formar um mosaico. Essas propriedades são bastante utilizadas no desenho de páginas web e talvez já as dominemos. Agora , com CSS 3 temos a possibilidade de especificar novos estilos ou modos de comportamento das imagens.

Neste artigo exploraremos o novo atributo background-origin, que faz parte da nova especificação de Folhas de Estilo em Cascata. Veremos também exemplos de como utilizar este atributo, dentro das explicações que estamos apresentando no Manual de CSS 3.

O que é background-origin

Quando colocamos uma imagem de fundo em um elemento de HTML se posiciona dentro do espaço desse elemento. Por padrão, uma imagem de fundo aparece como um mosaico, repetindo a imagem ao longo de todo o espaço desse elemento. Porém, para colocar essa imagem o navegador utiliza uma origem de coordenadas, que veremos mais facilmente se fizermos com que a imagem não se repita, ou seja, que não se faça um mosaico no fundo.

Observar o exemplo da seguinte imagem:

Colocou-se uma imagem de fundo para esse elemento, mas a imagem não se repete. Pode-se ver o amarelo do fundo da cor atribuída ao elemento e a imagem de fundo em azul. Agora vejamos onde começa a imagem. Veremos que está colocada dentro do elemento, dentro do corpo e sem levar em conta a borda. Sabemos que com background-position poderíamos mudar essa posição, mas em CSS 3 existe o atributo background-origin que também nos servirá para transferir essa imagem, porém de outra maneira.

Com background-origin podemos definir a origem de coordenadas sobre a qual vai ser colocada a imagem de fundo, para que seja a borda do elemento, seu padding ou seu conteúdo. Vejamos seus possíveis valores com uma explicação:

border-box:
Este valor significa que a origem de coordenadas da imagem será a borda do elemento. Neste caso estamos indicando que a imagem comece onde começa a borda do elemento, caso tenha borda.

background-origin: border-box;

padding-box:
Este valor é aquele utilizado por padrão em CSS 3 e é como se posiciona a imagem em navegadores que só entendem o CSS 2 ou inferior. Quando indicamos background-origin: padding; queremos que o eixo de coordenadas onde se vai colocar a imagem seja o espaço destinado ao elemento, incluindo seu possível padding e sem contar a possível borda.

background-origin: padding-box;

content-box:
O terceiro dos possíveis valores de background-origin serve para que a origem de coordenadas para a posição da imagem de fundo seja o lugar onde começa o conteúdo do elemento, ou seja, sem levar em conta suas possíveis bordas e padding.

background-origin: content-box;

Para termos uma ideia mais clara sobre os distintos valores de background-origin fizemos um exemplo, mas é necessário ser visto com navegadores compatíveis com CSS (em seguida explicamos isso).

Ver um exemplo funcionando em uma página à parte.

Nota: Se background-attachment tem o valor "fixed" este atributo será ignorado.

Compatibilidade de background-origin

À hora de escrever este artigo os navegadores ainda não haviam implementado todas as novas características das CSS. Na maioria de casos estão apenas sendo testadas, até que as especificações de CSS 3 sejam recomendadas para sua implementação.

Por isso, os navegadores que começaram a suportar as CSS utilizam alguns prefixos para os nomes das propriedades. Em Mozilla Firefox devemos utilizar o atributo -moz-background-origin, em navegadores baseados em webkit (como Chrome ou Safari) deve-se utilizar o atributo -webkit-background-origin.

Além disso, em navegadores baseados em webkit e Mozilla não se leva em conta a terminação "-box" ao final dos valores dos atributos, razão pela qual há que eliminá-la.

Por sua vez, em Opera já vem implementada a funcionalidade com o nome de atributo definitivo, e seus valores com a correspondente terminação "-box", que é como aparece na especificação atual do modelo de caixa de CSS 3.

Este seria o código CSS para aplicar distintos valores de background-origin e que sejam entendidos por todos os navegadores mais modernos.

Nota: O Internet Explorer 8, o mais atual dos navegadores de Microsoft no momento, as CSS 3 não estão implementadas de nenhum modo, assim que não poderemos ver estes exemplos em funcionamento.

#provasfundo1{
   -moz-background-origin: border;
   -webkit-background-origin: border;
   background-origin: border-box;
}
#provasfundo2{
   -moz-background-origin: padding;
   -webkit-background-origin: padding;
   background-origin: padding-box;
}
#provasfundo3{
   -moz-background-origin: content;
   -webkit-background-origin: content;
   background-origin: content-box;
}

Assim, já aprendemos a mudar o eixo de posicionamento da imagem de fundo com background-origin, contudo voltamos a comentar que a posição da imagem definitiva também pode ser marcada com background-position. Na verdade, com o atributo background-origin estamos definindo o eixo de coordenadas sobre o qual vai ser aplicado o background-position para colocar definitivamente a imagem.

Para terminar, colocamos de novo o link do exemplo funcionando.





Manual: CSS 3


Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato