Propriedade Background

Inserindo fundo nos elementos

O background trata do fundo dos elementos. O elemento que mais recebe esta propriedade é o body.

As propriedades do background são:

color

Define a cor do fundo.

Possíveis valores:

• inherit: Herda o valor do elemento pai.
• transparent: Define cor como transparente.
• <cor>: Define uma determinada cor.

div {
  background-color: gray;
}

image

Define a imagem de fundo.

Possíveis valores:

• inherit: Herda o valor do elemento pai.
• none: Indica que não há imagem de fundo.
• url(): Define a localização da imagem de fundo.

div {
  background-image: url("../img/bg.png");
}

repeat

Define a posição de repetição da imagem de fundo.

Possíveis valores:

• inherit: Herda o valor do elemento pai.
• repeat: Repete a imagem vertical e horizontalmente.
• repeat-x: Repete a imagem horizontalmente.
• repeat-y: Repete a imagem verticalmente.
• no-repeat: Não repete a imagem.

div {
  background-repeat: no-repeat;
}

attachment

Define se a imagem definida irá rolar juntamente com o viewport, ou se irá ficar fixo.

Possíveis valores:

• inherit: Herda o valor do elemento pai.
• fixed: Mantém a imagem de fundo fixa na posição definida independente da rolagem do viewport.
• scroll: A imagem de fundo acompanha a rolagem do viewport.

div {
  background-attachment: fixed;
}

position

Define a posição da imagem de fundo. Observe que esta propriedade necessita de atenção de acordo com o background-repeat definido.

Possíveis valores:

• inherit: Herda o valor do elemento pai.
• <porcentagem>: sendo A e B dois números, quando declaramos o position com A% e B%, a posição A,B da imagem ficará na posição A%, B% do elemento.
• <comprimento>: sendo A e B dois números, quando declaramos o position com Apx e Bpx, a posição A,B da imagem ficará na posição Apx, Bpx do elemento.
• top: Equivale a 0% na posição vertical.
• bottom: Equivale a 100% na posição vertical.
• left: Equivale a 0% na posição horizontal.
• right: Equivale a 100% na posição horizontal.
• center: Caso não tenha sido declarado um valor horizontal, equivale a 50% na posição horizontal, ou, caso não tenha sido declarado um valor vertical, equivale a 50% na posição vertical.

div {
  background-position: top center;
}

background

É uma propriedade abreviada que une todas as propriedades do background.

div {
  background: gray url("../img/bg.png") no-repeat fixed top center;
}

Esta página está em construção. Volte em breve ou ajude a completá-la!