Tableless - Desenvolvimento inteligente com Padrões Web

24/07/2006
Artigos

CSS3 – Propriedade background

A propriedade background terá suporte a múltiplas imagens. Ou seja, você poderá colocar várias imagens de background em um elemento. Conseqüentemente a separação por vírgulas das propriedades aumentará um bocado. Você terá códigos do tipo: 1div {background-image: url(tl.png), url(tr.png), url(tr2.png);} …

Por

A propriedade background terá suporte a múltiplas imagens. Ou seja, você poderá colocar várias imagens de background em um elemento. Conseqüentemente a separação por vírgulas das propriedades aumentará um bocado. Você terá códigos do tipo:

1
div {background-image: url(tl.png), url(tr.png), url(tr2.png);}

Se você for definir tudo numa mesma linha e com o resto das propriedades, ficaria mais ou menos assim:

1
div { background: url(t1.png) no-repeat left top, url(tr.png) no-repeat center center, url(tr2.png) no-repeat center top;}

Outra nova propriedade que surge é a background-origin. Ela determina como o background-position será calculado. Suponha que você tenha um elemento com borda e padding. Se o background-origin tiver o valor border, por exemplo, o background será desenhado tomando como referência o ponto ’0 0′ do limite da borda. Se o valor for padding, então a referência será tomada como o ponto ’0 0′ do limite do padding. Interessante, não é?

Você também poderá definir uma dimensão para a imagem de background. Veja o código de exemplo:

1
2
3
4
div {<br />
background-size: 15px 30px;<br />
background-image: url(tile.png);<br />
}

Neste código, definimos que a imagem de background terá 15px de largura por 30px de altura.

Para mais informações interessantes sobre a propriedade Background no CSS3, visite o site do W3C, onde há mais detalhes e comentários dos editores: http://www.w3.org/Style/CSS/current-work#background.

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • http://lucasaf.wordpress.com Lucas Alves

    Poxa show de bola.
    Muito interessante os novos recursos :)

  • Thiago Paiva

    Múltiplas imagens de fundo? perfeito! :D

  • http://www.antenando.com.br Rael

    Curioso!

    Esse novo recurso pouparia uns minutos de quebra-cabeça que eu tive desenvolvendo um site!

    Com certeza é um recurso extremamente bem-vindo!

    Uma coisa que eu to em duvida ainda…

    Quando lançado o CSS3, é preciso fazer alguma atualização no Browser, no Programa, no Windows? Como funciona isso?

    valew

  • http://www.maiconjunches.com Maicon Junches

    Nesses dias eu fiquei me perguntando, porque não da pra colocar mais images de background?

    Muito legal isso ai, abração!

  • Rafael

    CSS 3 ainda não é uma realidade, poucos browser modernos suportam algum poucos seletores, como o Opera e o Firefox e derivados.

    Aqui esta um excelente artigo do site do Maurício Samy – Aprender CSS3?.

  • http://www.google.com Dirceu Macedo

    No CSS3 finalmente poderemos estilizar as combo box (drop down lists) ?!

    Alguem me tira essa duvida, pois aqui no meu trampo a internet ta bloqueada e não da pa acessar o site da w3c.

  • http://www.zhp.com.br Henrique Pimentel

    Essa é uma das propriedades que eu mais aguardo no CSS 3. Ela vai facilitar e muito o trabalho alem de poupar muitas tags extras que temos que colocar para fazer uma bordinha legal ou um fundo mais complexo.
    Outras propriedades que eu aguardo com muita ansiedade é a opcao de usar imagens como bordas e o Advanced Layout.
    Bom essas implementacoes poderiam sair o mais breve possivel, assim com a atualizacao do IE7 e do FireFox 2 ja teriamos uma boa parcela de pessoas com suporte a esses recursos, mas pelo jeito, acho q so vamos ter isso no IE 7.5 e no FF 2.5 :(

  • http://www.newtonwagner.net/blog Newton Wagner

    IE7 e Firefox 2 com CSS3? Acho que não hein. O IE não sabe nem o que é o 2 direito, e o firefox, pelo que eu saiba, ainda não passou no Acid2 test do webstandards.org tb.

    Como foi dito no bom artigo do Maujor citado pelo Rafael, acho que ainda não é tempo de aprender CSS 3. Tomara que não esteja colocando minhoca na cabeça de quem ta começando. :) .

  • http://www.numclique.net Joares Miranda

    A questão de divulgar simplesmente, não implica q se esteja colocando minhoca na cabeça das pessoas…

    Blog é pra isso mesmo… compartilhar conhecimento…

    Eu curti o artigo… bom mesmo!

  • http://www.thalisvalle.com Thalis valle

    Será que esta nova propriedade não deixará a imagem estourada?

    Pra mim, nada terá de útil se ao definir o width e height de modo não proporcional, a imagem estourar.

  • http://project47.viscountbox.com Putcharles

    Havia visto num site essa novidade do background no CSS3 e achei muito legal, até porque pode acabar economizando muitas DIVs e dor de cabeça dos desenvolvedores, hehehe…

  • Leidiane

    nossa, to esperando isso a tempos
    Espero q os browsers se atualizem logo

  • http://www.eugeniogrigolon.com Eugenio

    Isso vai melhorar a vida de muita gente.
    Será que o nosso amigo IE 7 vai ter suporte a CSS3 corretamente como o FF? Ou teremos ainda de fazer dois tipos de CSS?

  • http://www.vitorgga.com VitorGGA

    Atééééé os browsers suportarem isso já vai ser uma légua, mas certamente que será uma enorme evolução, só pode ir ficando ruim que daqui a pouco teremos um zilhão de propriedades css, mas isso é até bom porque ai teremos certeza de que “quase” tudo é possível.
    A propriedade background-origin comandoh, muito útil ela!!!

  • http://www.personalsettings.org Luciano M.

    xato é esperar os browsers ficarem em conformidade, morte ao IE rsrs

  • Leyrson

    Concordo com o Newton mas tb concordo com o Diego em portas algo aqui.. A título de curiosidade e alerta..

    Mas seria muito mais produtito ter um estudo, pesquisa mesmo, sobre css 2 2.1.

    Para quem já se acostumou a pegar material de fora(ingles) ok .. mas aqueles que estao começando precisam de um suporte melhor e pesquisas.

    Os profissionais brasileiros que se dizem dispostos a ensinar acabam mostrando portfolio apenas.. ou dando uma “folhada” sobre alguma coisa mas nao se aprofundam.

    O maujor faz um trabalho sério, gosto bastante.. tb li o artigo q o rafael citou.

  • Lucas Ferreira

    Estou vendo que o CSS está caminhando cada vez mais no sentido de se tornar uma linguagem de programação client-side… As necessidades não se escondem…

    Um
    table.teste-cinco tr td:not(:last-child) {background: #060;}

    é quase uma função do tipo if not IsLastchild then…

  • http://www.n2design.com.br Sulivan

    morte ao IE com certeza.
    estou trabalhando num site atualmente, fiz o layout todo bonitinho, cortei, coloquei o css e imagens png com fundo transparente, pra poder agilizar e enfeitar um pouco. No Firefox ficou perfeito, e super rápido eu terminei…

    mas fiquei puto quando fui ver no Ie e estava tudo bagunçado, resumo, tive de fazer tudo novamente… e da forma “burra”

    Quando é que o IE vai apredner a lidar com background?

    Espero que essas novas definições venham para todos… heheh

  • http://amilmawen.deviantart.com isis

    Bom,mesmo o FF não passando no teste do Acid2 feito o Opera,convenhamos que a exibição da imagem é mil vezes melhor que a do IE 7.Mas parece que o FF 3 vai ter isso consertado.Quem sabe essa versão já implemente alguma coisa do CSS3?
    E essa de dividir em módulos foi ótima não só pelo detalhe de escolha,mas também porque fica mais fácil de estudar.Imagine ter que esperar toda uma especificação ficar pronta,passar por um processo burocrático que talvez barrasse a adoção como padrão por causa de algumas coisas aqui e ali,e no final das contas ter um rush de gente tentando aprender a mesma coisa gigante ao mesmo tempo.

  • http://www.redfrog.com.br Erick Luis

    Finalmente a propriedade que eu sempre quis usar!

    Isso é um sonho! Dividir backgrounds e usar como quiser!

    MTO BOM!

  • http://beconfused.awardspace.com/weblog Vera

    Querida (o)
    Eu tentei fazer no meu css! Não sei se fiz alguma coisa errada ou o meu css é incompatível (provavelmente).
    Mas está tudo bem, eu criei uma nova classe… Mesmo assim… Obrigada pelo tutorial!