Background no CSS

Background em CSS como fazer e aplicar.

O que você precisa:

• Ter conhecimento em HTML

O que iremos apreender:

• O que são background "fundo"
• Background com cor
• Background com imagem
• Repetindo um background
• Determinando a posição do background

Ah os backgrounds mais conhecidos como plano de fundo, aquele papel de parede que você costumar adicionar na sua área de trabalho. Sim iremos utilizar ele no CSS. Acho que com essa explicação podemos começar.

Background com cor

Este background é o mais simples de utilizar em sua folha de estilo vamos deixar o fundo da sua página na cor azul, para isso adicione em sua página de estilo o seguinte código.

body {background-color:blue;}

Lembrando que com o CSS você pode utilizar as cores nos seguintes formatos

• Hexadecimal - #ff0000
• RGB - rgb(255,0,0)
• Cor - blue

Lembrando também que podemos aplicar o background em outros elementos

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

Background com imagem

Com background-image você pode utilizar uma imagem, por padrão a imagem é repetida por várias vezes. Veja o exemplo abaixo.

body {background-image:url('paper.gif');}

Background com imagem repetindo na horizontal ou vertical

Horinzontal

body {
   background-image:url('gradient2.png');
   background-repeat:repeat-x;
}

Vertical

body {
   background-image:url('gradient2.png');
   background-repeat:repeat-y;
}

Background com imagem sem repetir

Adicionando a imagem sem repetir

body {
   background-image:url('img_tree.png');
   background-repeat:no-repeat;
}

Background posicionando de imagem

body {
   background-image:url('img_tree.png');
   background-repeat:no-repeat;
   background-position:right top;
}