Você pode definir várias propriedades no que se trata de fundo, seja no HTML todo ou em alguma tag específica.
O fundo (background) pode ter propriedades como por exemplo, uma cor de fundo, uma imagem, etc.
COR DE FUNDO
Esta propriedade é usada para definir a cor do plano de fundo (background) para qualquer elemento:
div{background-color:red;}
Nesse exemplo, a tag “div” em qualquer lugar em que ela estiver no decorrer do HTML, terá o fundo na cor vermelha.
IMAGEM DE FUNDO
Esta propriedade é usada para definir a imagem que vai ser exibida no plano de fundo de um elemento:
div{background-image: url("tecforest.png");}
Já nesse caso, o fundo da tag div será uma imagem.
Pode-se repetir a imagem de fundo na horizontal ou vertical usando a propriedade “background-repeat”:
div{background-image:
url("tecforest.png");background-repeat: repeat-y;}
ou
div{background-image:
url("tecforest.png");background-repeat: repeat-x;}
ou
div{background-image: url("tecforest.png");background-repeat: no repeat;}
A diferença entre as propriedades são:
- repeat-y pode repetir a imagem verticalmente;
- repeat-x repetir a imagem horizontalmente e;
- no-repeat para não repetir a imagem.
POSIÇÃO DE FUNDO
Você pode definir a posição da imagem de fundo assim:
div{background: red url("tecforest.png")
no-repeat; background-position: top left;}
FUNDO
Essa é a propriedade curta para definir todas as propriedades de plano de fundo em uma linha:
Exemplo:
div{background: red url("tecforest.png")
no-repeat top left;}
RESULTADO:
