4.1 Princípios Básicos
CSS permite usar várias imagens de fundo em um elemento, o que abre um leque amplo de possibilidades para criar efeitos visuais complexos e interessantes. Com a propriedade background-image e suas propriedades relacionadas, você pode definir várias camadas de imagens de fundo, controlando sua ordem, posição e outras características.
Sintaxe
Para definir múltiplas imagens de fundo, usa-se uma sintaxe onde as diferentes imagens são listadas separadas por vírgulas:
element {
background-image: imageUrl1, imageUrl2, imageUrl3;
}
Propriedades para Configurar Cada Nível
Além de background-image, para configurar cada camada de imagem de fundo são usadas as seguintes propriedades, que também suportam vários valores, separados por vírgulas:
background-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachment
Ordem das Camadas
As imagens são dispostas em camadas na ordem em que são listadas, onde a primeira imagem está mais próxima do usuário, e a última está mais próxima do fundo do elemento.
4.2 Sobreposição de Imagens
Sobreposição simples de imagens.
Exemplo de Uso:
.multi-bg {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, top left;
background-repeat: no-repeat, no-repeat;
border: 1px solid #000;
}
<body>
<div class="multi-bg">Fundo em Camadas</div>
</body>
Explicação do Código:
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');: define duas imagens de fundobackground-position: center, top left;: centraliza a primeira imagem e posiciona a segunda imagem no canto superior esquerdobackground-repeat: no-repeat, no-repeat;: desativa a repetição para ambas as imagens
4.3 Uso de Múltiplas Imagens
Usando várias imagens de fundo com tamanhos diferentes.
Exemplo de Uso:
.multi-bg-sizes {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, bottom right;
background-repeat: no-repeat, no-repeat;
background-size: 50% 50%, 30% 30%;
border: 1px solid #000;
}
<body>
<div class="multi-bg-sizes">Fundo em Camadas com Tamanhos</div>
</body>
Explicação do Código:
background-size: 50% 50%, 30% 30%;: redimensiona a primeira imagem para 50% da largura e altura do elemento, e a segunda imagem para 30% da largura e altura do elemento
4.4 Imagens Transparentes
Sobreposição de imagens com transparência.
Exemplo de Uso:
.multi-bg-opacity {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-size: cover, 50%;
border: 1px solid #000;
position: relative;
}
.multi-bg-opacity::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
<body>
<div class="multi-bg-opacity">Fundo em Camadas com Transparência</div>
</body>
Explicação do Código:
background-size: cover, 50%;: redimensiona a primeira imagem para cobrir todo o elemento, e a segunda imagem para 50% do tamanho do elemento::before: pseudo-elemento adiciona uma camada semi-transparente preta sobre as imagens de fundo
4.5 Recorte de Fundo
Usando outras propriedades com múltiplas imagens de fundo.
background-origin e background-clip
Essas propriedades controlam a área onde a imagem de fundo é exibida e a área de recorte do fundo.
Exemplo de Uso:
.multi-bg-origin-clip {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-origin: padding-box, content-box;
background-clip: border-box, padding-box;
border: 10px solid #000;
padding: 20px;
}
<body>
<div class="multi-bg-origin-clip">Fundo em Camadas com background-origin e background-clip</div>
</body>
Explicação do Código:
background-origin: padding-box, content-box;: a primeira imagem começa na borda interna do padding, a segunda imagem — a partir do conteúdo do elementobackground-clip: border-box, padding-box;: a primeira imagem é recortada pela borda externa, a segunda imagem - pela borda interna do padding
GO TO FULL VERSION