CSS – Propriedade Background

Fixando a imagem do plano de fundo com Background Attachment

Se você quiser fixar a imagem do seu plano de fundo no site com CSS, você deverá utilizar a propriedade “background-attachment” com o valor de “fixed” para assim fixar sua imagem e quando rolarmos a página para baixo ou para cima seu plano de fundo permanecerá no mesmo lugar. Veja o exemplo abaixo:

body{
	background-attachment: fixed;
}

Cor do plano de funco com Background Color

A propriedade “background-color” define a cor do fundo de seu site. Os valores que você pode colocar aqui são o estilo de cores RGB, Hexadecimal e o nome da cor em inglês. Veja abaixo o exemplo de utilização desta propriedade:

body{
	background-color: rgb(50,50,50);
}

Imagem no plano de fundo com background Image

A propriedade “background-image” nos permite adicionar imagens ao plano de fundo do nosso site. Nela é preciso indicar o endereço da imagem utilizando a funç#ao “url” no CSS. Veja o exemplo de utilização desta propriedade abaixo:

body{
	background-image: url('/imagens/logo.png');
}

Posicionando o plano de fundo com Background Position

Para posicionar a imagem do seu plano de fundo, você deve utilizar a propriedade “background-position”. Os valores que você pode colocar nesta propriedade são diversos e incluem: left, right, top, bottom, center, pixels (px) e porcentagem (%). Veja abaixo a lista de alguns valores com um exemplo desta propriedade no CSS:

• background-position: top left;
• background-position: bottom right;
• background-position: 5px 50px;
• background-position: 50% 50%;

*Quando você utiliza valores numéricos nesta propriedade (pixels e porcentagens), o primeiro valor é o valor horizontal (eixo X) e o segundo valor é o valor vertical (eixo Y).

Repetindo o plano de fundo com Background Repeat

Para repetir o plano de fundo é muito fácil. Por padrão, o plano de fundo se repete automaticamente em todos os eixos (X e Y – horizontal e vertical) por isso se é isso que você deseja fazer você nem precisa digitar nada! Embora seja muito fácil repetir a imagem, se você deseja repetir apenas em um eixo ou se você não quer que a imagem se repita, você terá que utilizar a propriedade “background-repeat” com um dos valores: repeat-x (para repetir somente na horizontal), repeat-y(para repetir somente na vertical) ou no-repeat (para não repetir). Veja abaixo a demonstração desta propriedade:

body{
	background-repeat: no-repeat;
}

Código fonte muito grande? Use abreviaturas nas propriedades do CSS!

Se você reparou que ao adicionar plano de fundos ou outras propriedades você acabará digitando muitos comandos, não se preocupe pois o CSS já deu um jeito! Neste caso, para abreviar todos os comandos ensinados na vídeo aula e no texto acima simplesmente utilize a propriedade background com os seguintes valores indicados pelos nomes das propriedades: (background: attachmentcolor image position repeat). Veja abaixo um exemplo abreviado da propriedade background:

body{
	background: fixed rgb(50,50,50) url('imagens/logo.png') top left no-repeat;
}