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.
    

  1. div {
    2. 

  2.   background-color: gray;
    3. 

  3. }
    4.
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.
    

  1. div {
    2. 

  2.   background-image: url("../img/bg.png");
    3. 

  3. }
    4.
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.
    

  1. div {
    2. 

  2.   background-repeat: no-repeat;
    3. 

  3. }
    4.
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.
    

  1. div {
    2. 

  2.   background-attachment: fixed;
    3. 

  3. }
    4.
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.
    

  1. div {
    2. 

  2.   background-position: top center;
    3. 

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

  1. div {
    2. 

  2.   background: gray url("../img/bg.png") no-repeat fixed top center;
    3. 

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

Postagens mais visitadas