A propriedade Background permite que você controle a cor do plano de fundo de um elemento, configure uma imagem como plano de fundo, e posicione uma imagem em uma página.
As principais propriedades de estilização de um plano de fundo são:
Guia do artigo:
| Propriedade | Descrição | Valores |
|---|---|---|
| background | Propriedade para configurar todas as propriedades do plano de fundo em uma declaração | background-color, background-image, background-repeat background-attachment, background-position |
| background-attachment | Especifica se uma imagem de plano de fundo é fixa ou rola com o resto da página | scroll, fixed |
| background-color | Configura a cor do plano de fundo de um elemento. | color-rgb, color-hex, color-name, transparent |
| background-image | Configura uma imagem como plano de fundo. | url, none |
| background-position | Configura a posição inicial de uma imagem de plano de fundo. | top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x-% y-%, x-pos y-pos. |
| background-repeat | Estabelece se uma imagem de plano de fundo será repetida ou não. | repeat, repeat-x, reapeat-y, no-repeat |
No nosso exemplo, vamos escolher uma imagem aleatória e a usaremos como plano de fundo e aplicaremos todos os estilos nela.
Primeiro vamos criar o nosso documento HTML, bem simples só com uma div que será a div que irá receber a imagem.
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Propriedades de background em CSS - Linha de Código</title>
<!-- Aqui chamamos o nosso arquivo css externo -->
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
<div id="teste">
</div>
</body>
</html>
background-color
Agora vamos começar a aplicar os efeitos css. Primeiro vamos utilizar o background-color, para aplicar uma cor ao fundo do nosso site.
body {
background-color: #082767;
}
Lembrando que as cores podem ser escolhidas pelo nome da cor em inglês, pela tabela de cores rgb e também pela tabela de cores hexadecimais.
Tendo a nossa cor de fundo definida, precisamos agora inserir a nossa imagem como plano de fundo da div, para isso vamos utilizar o background-image, como podemos ver a seguir:
background-image
Nota: Vamos definir um tamanho de 400x de largura e 300px de altura para a nossa div para que possamos demonstrar os efeitos que queremos.
#teste{
width: 400px;
height: 300px;
background-image: url(logolc.png);
}
Até agora usamos duas propriedades de background, vamos ver como está ficando o nosso tutorial?
Por padrão os navegadores assumem algumas propriedades, como podemos ver na primeira imagem, ela está por padrão sendo repetida e com um posicionamento, mas com a ajuda das outras propriedades podemos manipular isso de uma forma bem simples e deixar a imagem exatamente como queremos.
background-repeat
Vamos ver as diferentes variações de repetição da imagem. Vamos incluir mais três div’s em nosso documento HTML, com id’s diferentes e vamos aplicar o seguinte efeito CSS nelas:
body{
background-color: #082767;
}
#teste{
width: 400px;
height: 100px;
background-image: url(logolc.png);
background-repeat: repeat;
}
#teste1{
width: 400px;
height: 150px;
background-image: url(logolc.png);
background-repeat: repeat-x;
}
#teste2{
width: 400px;
height: 150px;
background-image: url(logolc.png);
background-repeat: no-repeat;
}
#teste3{
width: 400px;
height: 100px;
background-image: url(logolc.png);
background-repeat: repeat-y;
}
Na Figura 2 poderemos ver o que acontece com a imagem em diferentes casos de repetição.
Agora vamos falar um pouco das outras propriedades:
background-attachment
Essa propriedade é muito legal, pois ela é quem especifica se uma imagem de plano de fundo é fixa ou rola com o resto da página, muito utilizada quando queremos dar destaque em alguma imagem e queremos que ela se mantenha fixa na tela, por exemplo.
Ela possui dois valores, fixed e scroll, os quais definem se a imagem fica fixa na tela ou se vai rolar como o resto da página. Para usá-la é bem simples, veremos como realizar os dois.
#teste{
width: 400px;
height: 200px;
background-image: url(logolc.png);
background-repeat: no-repeat;
background-attachment: fixed;
}
#teste_1{
width: 400px;
height: 200px;
background-image: url(logolc.png);
background-repeat: no-repeat;
background-attachment: scroll;
}background-position
Agora vamos falar do posicionamento do plano de fundo, para isso usamos a propriedade background-position. Existem diversas opções para definição do posicionamento do plano de fundo, na tabela no início desse tutorial vem dizendo quais são.
Essa é uma propriedade muito útil também, pois é com ela que conseguimos definir exatamente aonde a nossa imagem vai se posicionar dentro da nossa div, no exemplo a seguir, irei colocar uma borda na div para podermos ver mais facilmente os limites da div e assim vermos que o posicionamento da imagem está de acordo com o que definimos na propriedade.
#teste{
width: 400px;
height: 200px;
border: 1px solid;
background-image: url(logolc.png);
background-repeat: no-repeat;
background-position: bottom right;
}
No código acima, definimos que o posicionamento da imagem será: bottom right, ou seja, a imagem ficará posicionada na parte inferior direita da div, como podemos ver na imagem a seguir.
Espero que todos tenham entendido como se trabalhar com as muitas variações de propriedades de background e fiquem a vontade em fazer suas perguntas e expor as dúvidas nos comentários, espero que tenham gostado e até o próximo tutorial.
