CSS: Como adicionar duas imagens de fundo em um site

22 de agosto de 2023 admin

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.

Você pode gostar também

Como adicionar Font Awesome no JsFiddle

CSS: Problemas de espaços entre itens de lista

CSS: Sobrepondo uma imagem com uma imagem transparente (png)

Deixe um comentário Cancelar resposta