Pinceladas da Web

VocÊ perdeu algum post da série? Basta estar dando uma olhada aqui. Mas vamos ao que interessa, hoje iremos ver mais informações sobre a propriedade background, com ela você pode definir o fundo de um elemento com apenas uma linha:

background: #ffffff url(endereço_da_imagem) top left no-repeat fixed;

Valores

• attachment
• color
• image
• position
• repeat

Você também pode definir os valores individualmente.

Background Attachment

Se você estiver utilizando uma imagem de fundo em seu site, você pode definir em background attachment para que ele fique fixo, para parecer que o texto está flutuando sob o background ou scroll, para que ele role junto com a página.

Valores

• fixed
• scroll

Background Color

Para especificar a cor de fundo de um elemento, utilize-se da propriedade Background Color:

background-color: valor;

Valores

• Nome da cor
• Número hexadecimal
• Código da cor RGB
• Transparent

Background Image

Para especificar uma imagem de fundo para um elemento, utilize a propriedade Background Image:

background-image: url(endereço_da_imagem);

Valores

• url
• none

Background Position

Você pode posicionar a imagem utilizada no fundo de qualquer elemento, para isso utilize-se da propriedade Background Position:

background-position: value;

Valores

• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right
• x-% y-%
• x-pos y-pos

Background Repeat

Você pode ajustar uma imagem de fundo usada em qualquer elemento para que ela se repita nos eixos x e y, basta utilizar a propriedade Background Repeat:

background-repeat: valor;

Valores

• no-repeat
• repeat
• repeat-x
• repeat-y

Tradução do artigo original de: CSS Basics.