Imagem de fundo em CSS
No CSS, o imagem de fundo A propriedade é usada para definir a imagem de fundo para elementos únicos ou múltiplos. No CSS, várias propriedades podem ser usadas para definir a imagem de fundo. Algumas propriedades comumente usadas são declaradas abaixo:
- tamanho de fundo A propriedade é usada para ajustar o tamanho da imagem de fundo.
- fundo de repetição A propriedade permite ou desativa a repetição de uma imagem.
- Posição de fundo Especifica a posição de uma imagem.
Esta redação apresentará uma visão abrangente da propriedade de imagem de fundo, onde você aprenderá como adicionar uma imagem de fundo a um único elemento ou corpo inteiro.
Como adicionar uma única imagem de fundo no CSS
A propriedade de imagem de fundo é usada principalmente com o elemento corporal, mas pode ser adicionado a qualquer elemento específico, como parágrafos, títulos, divc etc. Para adicionar a imagem de fundo.
Exemplo 1: A parte do código abaixo foi dada incorporará uma imagem de fundo em todo o corpo:
Imagem de fundo
Bem -vindo ao Linuxhint.com
Ele mostrará a seguinte saída:
No exemplo acima, a imagem foi colocada na mesma pasta com o arquivo html, de modo, no Url É preciso apenas o nome da imagem com sua extensão, como mostrado no snippet seguinte:
Agora vamos mover a imagem para outra pasta, deixe dizer "Imagens":
Se a imagem não estiver lá no mesmo diretório, precisamos especificar o caminho completo da imagem, caso contrário, não obteríamos os resultados desejados.
Exemplo 2: Em vez de fornecer o caminho completo, este exemplo tentará acessar a imagem apenas com o nome:
Imagem de fundo
Bem -vindo ao Linuxhint.com
A imagem é colocada nas imagens. A partir da saída, ficaria claro que, se você não especificasse o caminho exato, não obteria os resultados desejados, como mostrado abaixo:
Exemplo 2: Vamos considerar um exemplo em que a imagem está presente na pasta de imagens enquanto o arquivo html está lá na pasta de imagem de fundo. Nesse caso, especificamos o caminho completo da imagem, como mostrado no seguinte snippet:
Imagem de fundo
Bem -vindo ao Linuxhint.com
No URL primeiro vem dois pontos "..." que os estados voltam um diretório e depois vá para o “Imagens” Diretório onde a imagem é colocada e, no nome final, o nome da imagem virá com sua extensão como JGEG, PNG, etc. Agora, este programa gerará a saída adequada com a imagem de fundo, como mostrado abaixo:
Da mesma forma, a imagem de fundo pode ser incorporada a qualquer elemento como
,
, etc.
Como adicionar várias imagens de fundo no CSS
No CSS, várias imagens de fundo podem ser adicionadas ao mesmo elemento, fornecendo vários URLs.
Exemplo
O código abaixo dado adicionará várias imagens no elemento corporal, além disso, utilizará mais algumas propriedades, como repetição de fundo, tamanho de fundo, etc. como mostrado abaixo:
Imagem de fundo
Bem -vindo ao Linuxhint.com
O código acima utiliza
- propriedade colorida para definir a cor dourada para o texto,
- A imagem de fundo adicionou duas imagens,
- tamanho de fundo Defina o tamanho da imagem para 600px,
- posição de fundo para alinhar a posição da imagem ao centro,
- E, finalmente.
Como resultado, ele gerará a seguinte saída:
Da saída, você pode ver claramente que o azul.A imagem JPG está por trás do Linuxhint.Imagem JPEG, o que significa que o URL que você escreve primeiro aparecerá no topo, enquanto a segunda imagem será exibida na parte traseira/atrás.
Conclusão
imagem de fundo Propriedade define a imagem de fundo para elementos únicos ou múltiplos. Para implementar uma imagem em segundo plano, basta especificar o URL da imagem na propriedade de imagem de fundo.
Este artigo apresentou uma visão geral detalhada da propriedade de base-imagem. Inicialmente, explica como adicionar uma única imagem de fundo no CSS. Posteriormente, isso escreva guiado como definir mais de uma imagens de fundo para um elemento.