Imagens de Background
Para adicionar uma imagem
como background em um elemento
HTML, se utiliza formatação
CSS.
É possível adicionar imagens
de background em páginas
inteiras ou elementos da
página.
Existem quatro propriedades
importantes para o uso de
imagens como background:
background-image
-
Define o endereço da imagem
que será utilizada como
background.
-
A sintaxe da propriedade é
background-image: url("imagem.formato"), ou
background-image: url("https://www.endereco.gov/imagem.formato").
background-repeat
-
Se a imagem de background é
menor do que o corpo da
página, ela irá se repetir
tanto horizontalmente
quanto verticalmente.
-
Exemplo:
Página 1.
-
Para evitar que a imagem se repita,
modifique a propriedade
background-repeat para
background-repeat: no-repeat.
Exemplo:
Página 2.
background-attachment
-
Essa propriedade define se
a imagem de background irá
escrolar com a página ou
será fixa.
-
Por padrão, a imagem de background irá
escrolar junto com a página.
Exemplo:
Página 3.
-
Para que a imagem de background fique
fixa na tela, modifique a propriedade
background-attachment para
background-attachment: fixed.
Exemplo:
Página 4.
background-size
-
Define o dimensionamento da
imagem de background na página.
-
Para a imagem de background
cobrir a página inteira sem
esticar a imagem, modifique a
propriedade
background-size
para
background-size: cover.
Exemplo:
Página 5.
-
Para que a imagem de background
se estique para cobrir a página
inteira, modifique a propriedade
background-size
para
background-size: 100% 100%.
Dessa forma, a imagem irá se esticar
para cobrir 100% do espaço, tanto
horizontalmente quanto verticalmente.
Exemplo:
Página 6.
<- Voltar