Bom pessoal, nesta segunda parte vou postar sobre as propriedades de background. Elas são utilizadas para personalização do fundo dos elementos. Ao total são 5:
– background-color
– background-image
– background-repeat
– background-attachment
– background-position
Abaixo exemplos da utilização de cada uma destas propriedades e os valores que podem ser atribuídos:
BACKGROUND-COLOR:
Pode ser utilizada para personalizar a cor de fundo do elemento. Os valores que lhe podem ser atribuídos são:
– Cores em código hexadecimal: #FFFFFF
– Cores em código RGB: rgb(255,235,0)
– Nome da cor: yellow, black, green, red e etc
– Transparente: transparent
Um exemplo de alteração da cor de fundo de um parágrafo:
Parágrafo com o fundo amarelo
Este efeito acima é resultado da seguinte folha de estilo:
p{
background-color: yellow;
}
BACKGROUND-IMAGE:
Possibilita inserir uma imagem de fundo no elemento. O único valor que lhe deve ser atribuído é a URL da imagem.
Sua sintaxe é:
body{
background-image: url(caminho/imagem.jpg);
}
BACKGROUND-REPEAT:
Define a maneira de repetição para o fundo. Os valores que lhe podem ser atribuídos são:
– no-repeat
– repeat
– repeat-y
– repeat-x
Ao utilizar “no-repeat”, a imagem de fundo aparece somente uma vez sem se repetir conforme a imagem abaixo:
Ao utilizar “repeat”, a imagem de fundo se repete por toda parte no elemento:
Ao utilizar “repeat-y”, a imagem de fundo se repetirá no eixo Y, ou seja, na vertical:
Ao utilizar “repeat-x”, a imagem de fundo se repetirá no eixo X, ou seja, na horizontal:
BACKGROUND-POSITION:
Define a forma de posicionamento da imagem no fundo do elemento. Os valores que lhe podem ser atribuídos são:
– top left (Posicionado no topo a esquerda)
– top center (Posicionado no topo e centralizado)
– top right (Posicionado no topo a direita)
– center center (Posicionado no centro)
– center left (Posicionado no centro a esquerda)
– center right (Posicionado no centro a direita)
– bottom left (Posicionado no fundo a esquerda)
– bottom center (Posicionado no fundo e centralizado)
– bottom right (Posicionado no fundo a direita)
BACKGROUND-ATTACHMENT:
Define o modo de comportamento da imagem de fundo. Os valores que lhe podem ser atribuídos são:
– fixed
– scroll
Ao definir “fixed”, a imagem de fundo ficará fixada na tela. O exemplo poderá ser visto neste site e também neste (reparem que ao “rolar” a página o fundo permance fixo).
Já com “scroll”, a imagem de fundo acompanhará a rolagem, como acontece na maioria dos sites. Exemplos: aqui e aqui.
Até a próxima!
