CSS plano de fundo (background), quais são as diferenças e como usar?
O CSS plano de fundo (blackground) é utilizado especifico para colocar uma cor ou imagem de fundo em um ou mais elementos. Quando utilizamos imagens de plano de fundo, também é possível fazer alguns ajustes como, por exemplo, fixando a imagem no fundo ou repetindo-a.
Vamos lá então?
Sintaxes do CSS background:
- background
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Com a primeira propriedade é possível englobar todas as outras em uma única linha, da seguinte forma:
background: backgrond-color background-image background-repeat background-position;
Exemplo:
#plano {
background: #069 url(imagens/plano.jpg) left top no-repeat;
}
Ou seja, primeiro eu indico uma cor que deve existir no fundo, seguido de uma imagem que completamente, depois indico o posicionamento dessa imagem e por ultimo se ela deve ou não se repetir.
Vamos ver cada um de forma separada:
background-color
Para adicionar somente cor de fundo a um elemento (tendo ele ou não imagem), use o background-color
background-color:#000;
Essa opção deverá ser preenchida com uma cor em hexadecimal, podendo utilizar três ou seis caracteres.
IMPORTANTE: Para utilizar somente três caracteres é necessário que os pares das três cores (RGB) sejam iguais, por exemplo:
Se eu utilizar a cor: #006699 (veja que os pares do R (Red), G (Green) e B (Blue) são iguais), portanto eu posso “encurtar”, utilizando somente três caracteres: #069.
background-image
Essa opção adiciona uma imagem no plano de fundo de um elemento e ao contrario da opção background, não é possível adicionar em linha o posicionamento e se a imagem deve ou não repetir, pois elas deverão ser adicionadas de forma separada.
background-image:url("plano.jpeg");
background-repeat
Adiciona uma informação de como a imagem deve se comportar, repetindo, não repetindo, acompanhe as opções abaixo:
- repeat-x: Repete somente no eixo X (largura).
- repeat-y: Repete somente no eixo Y (altura).
- repeat: Repente em ambos os eixos.
- no-repeat: Não repete.
background-attachment
Indica se uma imagem deve se manter fixa enquanto todo o conteúdo da página rola ou se a imagem deve rolar com o conteúdo, acompanhe abaixo as opções:
- scroll: Opção padrão, o plano de fundo rola junto com o conteúdo.
- fixed: O plano de fundo fica fixo, enquanto o conteúdo rola sobre ele.
- local: Essa opção é semelhante a opção scroll, o diferencial é a forma como a imagem é enquadrada, podendo ser relativo a forma como a imagem fica fixa.
- initial: Deixa o valor padrão para essa propriedade (elemento).
- inherit: Recupera as configurações do elemento anterior (pai).
background-position
Determina o posicionamento da imagem com valores pré-fixados ou determinados pelo desenvolvedor, veja abaixo as opções para essa propriedade:
- left top
- left center
- left bottom
- right top
- right center
- right bottom
- center top
- center center
- center bottom
Além desses valores pré-fixado, como já mencionado também é possível direcionar a imagem com, por exemplo, valores fixos em pixels, porcentagens, etc, da seguinte forma:
background-position: 5px 10px;
Lembrando que o primeiro indicador sempre será o eixo X (horizontal) e o segundo o eixo Y (vertical).
Dúvidas nos comentários e até a próxima =D.
