Como colocar duas imagens no background CSS

Múltiplos backgrounds com CSS

 

como-colocar-duas-imagens-no-background-cssNo CSS3 a propriedade background tem a possibilidade de se colocar vários fundos no mesmo elemento, ou melhor dizer que temos a possibilidade de definirmos várias imagens como background em uma única DIV, inputs ou qualquer outro elemento que você desejar.

Como proceder?

É bem simples, você precisa utilizar somente a propriedade “background”, não funciona com background-image e background-color para esta condição que irei mostrar.


Veja nosso exemplo, apenas precisa separar as condições por virgula

.myclass {background: url("imagens/bg-header-bg1.png") repeat, url("imagens/bg-header2.png") top left repeat-x;}

Alem disso é possível adicionar por exemplo a cor de fundo somado as duas imagens no background do mesmo elemento

.myclass { background: url("imagens/bg-header-bg1.png"), url("imagens/bg-header-bg2.png") repeat-x rgba(255, 255, 255, 0.702); }