WebCis - Serviços de criação sites, marketing digital e sistemas web.

SIGA-NOS
Solicite um orçamento

Dicas para Criação e de sites

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  300px 70px,
url(sua-outra-imagem.jpg) top center repeat-x,
#fff;


}
</style> 

Veja o Resultado:

Texto de exemplo da DIV
Publicidade
Postado por: Claudio I. Santos
Projetos e Tecnologia

Assine nosso feeds e receba notícias todas semanas

Últimos Clientes

[veja todos]