Imagens de fundo HTML
Uma imagem de fundo pode ser especificada para quase qualquer elemento HTML.
Imagem de fundo em um elemento HTML
Para adicionar uma imagem de fundo em um elemento HTML, use o styleatributo HTML e a background-imagepropriedade CSS:
Exemplo
Adicione uma imagem de fundo em um elemento HTML:
<div style="background-image: url('img_girl.jpg');">
Você também pode especificar a imagem de fundo no <style>
elemento, na <head>
seção:
Exemplo
Especifique a imagem de fundo no <style>
elemento:
<style>
div {
background-image: url('img_girl.jpg');
}
</style>
Imagem de fundo em uma página
Se você quiser que a página inteira tenha uma imagem de fundo, você deve especificar a imagem de fundo no <body>elemento:
Exemplo
Adicione uma imagem de fundo para a página inteira:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
fundo de repetição
Se a imagem de fundo for menor que o elemento, a imagem se repetirá, horizontal e verticalmente, até chegar ao final do elemento:
Exemplo
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
Para evitar que a imagem de fundo se repita, defina a background-repeatpropriedade como no-repeat.
Exemplo
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
Capa de fundo
Se você quiser que a imagem de fundo cubra todo o elemento, você pode definir a background-sizepropriedade como
cover.
Além disso, para garantir que todo o elemento esteja sempre coberto, defina a
background-attachmentpropriedade comofixed:
Dessa forma, a imagem de fundo cobrirá todo o elemento, sem esticar (a imagem manterá suas proporções originais):
Exemplo
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Alongamento de fundo
Se você quiser que a imagem de fundo se estique para caber em todo o elemento, você pode definir a background-sizepropriedade como
100% 100%:
Tente redimensionar a janela do navegador e você verá que a imagem se alongará, mas sempre cobrirá todo o elemento.
Exemplo
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Saiba mais CSS
Com os exemplos acima, você aprendeu que imagens de plano de fundo podem ser estilizadas usando as propriedades de plano de fundo do CSS.
Para saber mais sobre as propriedades de plano de fundo do CSS, estude nosso Tutorial de plano de fundo do CSS .