Aprenda a utilizar a propriedade background

Nas aulas passadas nós aprendemos sobre seletores, agora nós partimos para as propriedades e para começar nós iremos falar sobre a propriedade background.

• Veja essa aula Curso de CSS – Classes e Id ( Aula 3)

Background é uma propriedade CSS, essa propriedade serve para colocar fundos nos elementos, como cores ou imagens, exitem algumas váriaveis de background, abaixo segui a tabela com  todas as propriedades background e valores para mesma.

• background-color (cor do fundo):

Segundo nossa tabela acima a propriedade background-color tem quatro valores possíveis, são valores referentes a cores então no exemplo abaixo eu busquei utilizar os quatro valores possíveis.

/* CSS Document */

#vermelho { background-color:#F00;}
#amarelo { background-color: rgb(255,235,0);}
#verde { background-color: green;}
#transparente { background-color: transparent;}

• background-image (imagem de fundo )

A propriedade background-image, serve para colocar uma imagem de fundo na linguagem de marcação, de acordo com nossa tabela background-image só tem um tipo de valor;

#seletor { background-image: url('URL');

Nós temos que colocar a URL da imagem, ou seja o caminho onde a imagem está hospedada.

#seletor {
background-image:
   url(http://www.explicacao.net/wp-content/uploads/Explicação-da-Net.jpg);
}

• background-repeat (Define como a imagem de fundo se repetirá )

Está propriedade define o modo que a imagem vai aparecer, se ela repete na horizontal, na vertical ou ambos, a propriedade background-repeat tem quatro valores, no exemplo a baixo explicaremos como utilizar.

#seletor {
  background-image:
     url(http://www.explicacao.net/wp-content/uploads/Explicação-da-Net.jpg);
  background-repeat:repeat-x;

}

#seletor {
  background-image:
     url(http://www.explicacao.net/wp-content/uploads/Explicação-da-Net.jpg);
  background-repeat:repeat-y;

}

#seletor {
  background-image:
     url(http://www.explicacao.net/wp-content/uploads/Explicação-da-Net.jpg);
  background-repeat:no-repeat;

}

• background-attachment (Imagem fixa ou não)

A propriedade background-attachment define se a imagem ficará fixa (parada) ou em rolagem, nós temos dois tipos de valores .

Bem, neste exemplo nós aplicamos o valor fixed na propriedade background-attachment, isto significa que a imagem ficará parada; fixa.

#seletor {
  background-image:
     url(http://www.explicacao.net/wp-content/uploads/Explicação-da-Net.jpg);
  background-repeat:no-repeat;
  background-attachment: fixed;

}

• background-position (Posição da imagem)

A propriedade background-position, serve para  alterar a posição em que a imagem aparece na tela de seu navegador, isto acontece em forma de coodernadas, nós utilizamos valores de unidades de tamanhos (px, cm, em, e etc…), ou em porcentagem ( %)

#seletor {
background-image:url(http://www.explicacao.net/wp-content/uploads/Explicação-da-Net.jpg);
background-repeat: no-repeat;
background-position: 300px 200px;
}

Vídeo aula: