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:
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.