Imagens de Background Multiplos
CSS 3 - Como aplicar imagens de background multiplos
Publicidade
Aprenda a usar várias imagens de background
Com os novos recursos do CSS3 já é possível colocar mais de um background de imagem em uma única DIV ou tag BODY.
Isso é muito útil quando quiser posicionar mais que um fundo em uma DIV ou quando precisa ilustrar o layout de um site com um background de fundo em cada local.
Vamos ao Exemplo:
Coloque em sua DIV ou tag os backgrounds separados por virgulas e no último não esqueça de colocar o ponto-e-virgula (;).
Cada imagem pode ter uma variável diferente.
Obs.: No exemplo abaixo irei usar uma imagem repetindo horizontalmente e outra fixa e posicionada.
<style type="text/css">
.varios-backgrounds {
height: 10px;
width: 568px;
padding: 200px 20px 20px 20px;
border: #690 1px solid;
background:
url(sua-imagem.jpg) no-repeat center 50px,
url(sua-outra-imagem.jpg) top center repeat-x,
#fff;
}
</style>
Veja o Resultado:
Texto de exemplo da DIV
Publicidade
Autor: Claudio I. Santos
Projetos e Tecnologia
Gostou dessa dica?
1 Voto(s)
Projetos e Tecnologia
