CSS: Como adicionar duas imagens de fundo em um site
Adicionar duas imagens de fundo em um site pode ser feito usando CSS (Cascading Style Sheets). No entanto, é importante informar que um elemento HTML normalmente só pode ter um fundo. Para adicionar duas imagens de fundo, você deverá usar o recurso de sobreposição dos elementos.
Sobrepondo Elementos
Nesta abordagem, você pode criar dois elementos, como “div”, que abrangem a área que deseja cobrir com as imagens de fundo. Em seguida, atribua uma imagem de fundo a cada um desses elementos.
HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="estilo.css"> </head> <body> <div class="bg1"></div> <div class="bg2"></div> </body> </html> |
CSS (estilo.css):
.bg1 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('imagem1.jpg'); background-size: cover; z-index: -1; } .bg2 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('imagem2.jpg'); background-size: cover; z-index: -2; } |
Nesse exemplo, z-index é usado para controlar a sobreposição das imagens de fundo.