Como usar várias imagens de fundo com CSS

Ao desenvolver qualquer aplicativo, o desenvolvedor deve manter a interatividade do aplicativo. Existem vários recursos que podem ajudar a chamar a atenção do usuário, como cores, imagens, gifs e mais. Para adicionar uma imagem ao site, html “”A tag pode ser utilizada. Considerando que adicionar várias imagens com CSS, o “imagem de fundo”A propriedade é usada com os URLs das imagens.

Este guia de estudo demonstrará como usar imagens de fundo com CSS. Então, vamos começar!

Como utilizar várias imagens de fundo com CSS?

O CSS “fundo”Propriedade é uma propriedade abreviada que contém fundo, atimento de fundo, clipe, imagem, repetição, origem, tamanho e propriedades de posição. A propriedade em segundo plano pode ser usada para especificar os URLs de várias imagens. Essas imagens estão então posicionadas e definidas de acordo.

Vamos dar um exemplo em que um elemento div contém apenas uma imagem como o logotipo da página da web enquanto a segunda contém três imagens.

Exemplo: Adicionando várias imagens de fundo com CSS

No HTML, adicione um elemento div para o logotipo e especifique o nome da classe. Por exemplo, chamamos isso “logotipo”. A segunda div usa várias imagens, então nomeamos "imagens múltiplas”. No entanto, você pode especificar o nome da classe conforme suas preferências.

Html

Na próxima seção, ajustaremos as imagens usando a propriedade de fundo CSS.

Estilo “logotipo” div

.logotipo
largura: 100%;
Altura: 50px;
preenchimento: 5px;
margem: 5px;
Antecedentes-tamanho: 100px;
Repetição de fundo: sem repetição;
Imagem de fundo: URL (Images/Linux-LOGO.png);

O elemento div com a classe “logotipo”É aplicado com as seguintes propriedades:

• ““largura”A propriedade é utilizada para definir a largura do elemento como“100%”.
• ““altura”A propriedade é usada para definir a altura do elemento“50px”.
• ““preenchimento”A propriedade é usada para definir o“5px”Espaço em torno do conteúdo especificado do elemento.
• ““margem”A propriedade é utilizada para definir o“5px”Espaço ao redor do elemento.
• ““tamanho de fundo”Propriedade define o tamanho da imagem de fundo do elemento como“100px”.
• ““fundo de repetição"Com o valor"sem repetir”Exibe o fundo apenas uma vez.
• ““imagem de fundo”A propriedade é usada para especificar o URL da imagem.

Estilo “múltiplas imagens” div

.imagens múltiplas
largura: 90%;
Altura: 45VH;
margem: 1px automático;
preenchimento: 20px;
Antecedentes-tamanho: 150px;
cor de fundo: RGB (157, 154, 151);
Imagem de fundo: URL (imagens/escritório.png), URL (imagens/html.png), URL (imagens/laptop.png);
Antecedentes-repetidos: sem repetição, sem repetição, sem repetição;
Posição de fundo: esquerda, centro, direita;

Agora, estilize o outro contêiner da seguinte maneira:

• ““cor de fundo”Propriedade especifica a cor do fundo do elemento.
• ““imagem de fundo”Propriedade especifica vários URLs de imagem.
• ““fundo de repetição”Propriedade define valores para as imagens em uma sequência das imagens especificadas na propriedade de imagem em segundo plano. Ambas as imagens são definidas como não repetidas, significa que elas serão exibidas no navegador apenas uma vez.
• ““posição de fundo”Ajusta a posição da imagem na sequência das imagens especificadas pela propriedade de imagem de fundo. A primeira imagem será definida no lado esquerdo, a segunda no centro e a terceira será colocada no lado direito.

Ao fornecer o código fornecido acima, o resultado no navegador ficará assim:

Dessa forma, podemos ajustar a posição de várias imagens com CSS.

Conclusão

Para tornar o aplicativo divertido e interativo, os desenvolvedores usam imagens e cores diferentes. Podemos definir várias imagens com propriedades de fundo CSS, como posição de fundo, repetição de fundo, tamanho de fundo e muito mais. Este manual demonstrou o uso de várias imagens de fundo com exemplos CSS.