CSSCursos WebTutoriais

Fundos (background) CSS

Aprenda a fazer fundos no CSS com a TecForest . . .

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:

Wendell Rodrigues

Administrador e editor do site TecForest , estudante de sistemas de informação pela Estácio de Sá, apaixonado por tecnologia e inovação.

Artigos relacionados

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Verifique também
Fechar
Botão Voltar ao topo