Voltando a falar sobre CSS3, hoje vamos analisar as novidades para backgrounds, ou fundos em português, ver o que é possivel fazer com eles e já ir para a prática:

• background-origin
• background-clip
• background-size
• fazer camadas com múltiplas imagens de fundo

Acompanhe os posts anteriores (importante):

Iniciando com CSS3
Prosseguindo com CSS3 – Bordas e Sombras

Background-origin

Como você já deve saber, ao setar um imagem de fundo em algum elemento, a imagem sempre será posicionada a partir do padding, ou seja, depois da borda. Com background-origin, você pode alterar este posicionamento inicial. Para background-origin são aceitos três valores: border-box, padding-box e content-box, sendo padding-box o valor padrão.

Sintax: [-moz- | -webkti-]?background-origin: border-box | padding-box | content-box [,border-box | padding-box | content-box]*

Veja a descrição para cada valor abaixo, assim você deve entender melhor o comportamento:

border-box: a imagem é posicionada a partir da borda (border).
padding-box: a imagem é posicionada a partir do padding (padrão).
content-box: a imagem é posicionada a partir do conteúdo, ou melhor dizendo, depois do padding.

As enginers Gecko (Mozilla) e Webkit, alteraram o valor, retirando “-box” no final. Foi uma simplificação, já que em cada propriedade esta parte do valor é presente, por isso a retirada. Sendo assim os valores para os prefixos “-moz-” e “-webkit-” passam a ser: border, padding e content. Observe um exemplo:

div{
	background: #FF0 url(bg.png) no-repeat;
	color: #000;
	padding: 20px;
	margin: 20px;
	border: 10px solid #CCC;
	background-clip: border-box;
	-moz-background-clip: border;
	-webkit-background-clip: border;
}

Apenas precisamos estar atento a uma observação: se a posição do background for fixo (background-attachment: fixed) não surtirá nenhum efeito alterar background-origin.

Veja o exemplo | Mais detalhes

Background-clip

Semelhantemente ao background-origin, background-clip também altera o modo como o fundo será tratado, neste caso sendo a cor de fundo.

Sintax: [-moz- | -webkti-]?background-clip: border-box | padding-box | content-box [,border-box | padding-box | content-box]*

border-box: a cor é posicionada a partir da borda – border – (padrão).
padding-box: a cor é posicionada a partir do padding.
content-box: a cor é posicionada a partir do conteúdo, ou como disse em background-origin, depois do padding.

div{
	background: #FF0 url(bg.png) no-repeat;
	color: #000;
	padding: 20px;
	margin: 20px;
	border: 15px solid rgba(255,0,0,0.3);
	background-clip: border-box;
	-moz-background-clip: border;
	-webkit-background-clip: border;
}

Em meus testes, apenas o firefox 3.6 não funcionou corretamente todas as propriedades, veja a tabela a seguir:

Valor	Firefox 3.6	Chrome 6	Safari 4	Opera 10.6	IE 9
border-box	funciona	funciona	funciona	funciona	funciona
padding-box	funciona	funciona	funciona	funciona	funciona
content-box	“bug”	funciona	funciona	funciona	funciona

Usando content-box no Firefox 3.6, o comportamento é o mesmo que usar border-box, ou seja, o padrão. Sendo mais técnico, o que ocorre é um erro de processamento de valor para -moz-background-clip, pois content-box (ou content) não foi implementado e por isso a declaração é ignorada voltando ao valor padrão.

A partir do Firefox 4 este “bug” já foi corrigido. Como atualmente Firefox 4 ainda está em desenvolvimento (beta), não é bom usar background-clip: content-box.

Demonstração | Mais detalhes

Acho que entendi, mas qual é a diferença entre background-origin e background-clip?

Bem simples, enquanto background-origin trata do posicionamento da imagem de fundo, background-clip trata do posicionamento da cor de fundo. Colocando em um exemplo: Eu preciso definir que a imagem de fundo e, somente a imagem de fundo inicie a partir do conteúdo. Neste caso eu irei usar somente background-origin, pois, a cor de fundo precisa incluir o padding e a borda. Entendeu?

Ah! Então se eu quiser reposicionar a cor de fundo eu devo usar somonte background-clip? EXATAMENTE!!! Exemplo disso seria para criar bordas transparentes usando background-clip, veja um artigo no css-tricks explicando como seria.

Background-size

Determina o tamanho da imagem de fundo de um determinado elemento. Vamos seguir o seguinte raciocínio: tenho uma imagem, mas não no tamanho que desejo usá-la, então preciso alterar o tamanho dela. Para isto, usamos background-size:

Sintax: [-moz|-webkit]?background-size: [ [ <comprimento> | <porcentagem> | auto ]{1,2} || contain | cover ] [ [ , [ <comprimento> | <porcentagem> | auto ]{1,2} ] || contain | cover ]*

<comprimento> – O tamanho em pixels que a imagem deverá ficar. Não aceita valores negativos.
<porcentagem> – O tamanho em porcentagem em relação ao elemento em que a imagem de fundo está sendo aplicada. Alterar background-origin, também influi no tamanho total do elemento.
auto – É o valor padrão, o navegador decidirá sozinho o que fazer, como acontece atualmente.
contain – Fala ao navegador para encaixar a imagem de fundo de modo que pegue toda a área disponível do elemento. Aqui a imagem é trabalhada para ficar com o maior tamanho possível.
cover – Trata a imagem para que fique com o menor tamanho possível, mas garantindo que fique com as dimensões da área do elemento. Um forma de entender o menor tamanho possível: Se a largura for menor que a altura, o menor tamanho possível será o comprimento da largura.

div{
	background: #FF0 url(bg.png) no-repeat;
	background-size: 200%;
	color: #000;
	padding: 20px;
	margin: 20px;
}

Você pode fazer uma dupla declaração de valor para background-size, assim o primeiro valor será referente a largura (width) e o segundo a altura (height).

Demonstração | Mais detalhes

Trabalhando com múltiplas imagens de fundo

Deixando um pouco de lado o “dissecamento” das propriedades, vou explicar como usar mais de uma imagem de fundo em um elemento. Lembrando que só é possível com CSS3. Antes vamos lembrar como se define uma imagem de fundo, no modo shorthand:

div{
	background: url(bg.png) no-repeat;
}

Para setar múltiplas imagens, apenas precisamos acrescentar uma vírgula para separar uma imagem da outras. Quem trabalha/trabalhou com JS ou PHP por exemplo, imagine que cada imagem seria um parâmetro/argumento da função. A sintax é a seguinte:

div{
	background: background1, background2, ..., backgroundN;
}

Na prática:

div{
	background-color: #FF0;
	background: url(bg.png) no-repeat bottom left, url(bg2.jpg) repeat-x top center, url(bg3.png) repeat-x bottom;
	color: #000;
	padding: 20px;
	margin: 20px;
}

Eu fiz no modo shorthand, mas também e possível usando cada parâmetro separado, a regra é a mesma, apenas adicione uma vírgula para separar cada imagem. Não há limite para o nº de imagens de fundo.

Demonstração | Mais detalhes

E por hoje a gente acaba por aqui. Dêem asas a imaginação e pratiquem o que foi visto até aqui… O segredo é praticar! Até a próxima.

A Séria Completa

Iniciando com CSS3
Prosseguindo com CSS3 – Bordas e Sombras
Avançando com CSS3 – Trabalhando com Backgrounds
Avançando com CSS3 – Entendendo as Cores
Aprendendo CSS3 – Trabalhando com Textos
Desenvolvendo CSS3 – Propriedades de Interface
Desenvolvendo CSS3 – Propriedades de Interface: Múltiplas Colunas em CSS3