As propriedades do fundo do CSS são usadas para definir os efeitos de fundo para elementos.
propriedades do fundo do CSS:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Cor de fundo
A background-color propriedade especifica a cor de fundo de um elemento.
A cor de uma página de fundo é definida como este:
Com CSS, uma cor é mais frequentemente especificado por:
- um nome de cor válida - como "red"
- um valor HEX - como "#ff0000"
- um valor RGB - como "rgb(255,0,0)"
Olhe para valores de cor CSS para uma completa lista de possíveis valores de cor.
No exemplo abaixo, o <h1>, <p> e <div> elementos têm diferentes cores de fundo:
Exemplo
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color:
yellow;
} Tente você mesmo " Imagem de fundo
A background-image propriedade especifica uma imagem para usar como plano de fundo de um elemento.
Por padrão, a imagem é repetida para que ele cobre o elemento inteiro.
A imagem de fundo de uma página pode ser definido assim:
Abaixo está um exemplo de uma má combinação de imagem de fundo de texto e. O texto é pouco legível:
 | Nota: Ao utilizar uma imagem de fundo, use uma imagem que não perturbe o texto. |
|---|
Imagem de Fundo - Repetir horizontalmente ou verticalmente
Por padrão, o background-image propriedade repete uma imagem horizontalmente e verticalmente.
Algumas imagens deve ser repetido apenas horizontalmente ou verticalmente, ou eles vão olhar estranho, como este:
Se a imagem acima é repetido apenas horizontalmente ( background-repeat: repeat-x; ), o fundo vai parecer melhor:
Exemplo
body
{
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
Tente você mesmo " | Nota: Para repetir uma imagem verticalmente definir background-repeat: repeat-y; |
|---|
Imagem de fundo - Definir posição e no-repeat
Mostrando a imagem de fundo apenas uma vez, também é especificado pelo background-repeat propriedade:
Exemplo
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
Tente você mesmo " No exemplo acima, a imagem de fundo é mostrado no mesmo lugar que o texto. Nós deseja alterar a posição da imagem, de modo que ela não perturba o texto demasiado.
A posição da imagem é especificado pelo background-position propriedade:
Exemplo
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Tente você mesmo " Imagem de Fundo - Posição fixa
Para especificar que a imagem de fundo deve ser fixado (não vai rolar com o resto da página), use o background-attachment propriedade:
Exemplo
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Tente você mesmo " Antecedentes - propriedade estenográfica
Para encurtar o código, também é possível especificar todas as propriedades de fundo em uma única propriedade. Isso é chamado de propriedade estenográfica.
A propriedade estenográfica para o fundo é background :
Ao usar a propriedade estenográfica a ordem dos valores de propriedade é:
-
background-color -
background-image -
background-repeat -
background-attachment -
background-position
Não importa se um dos valores de propriedade está faltando, enquanto os outros são, nesta ordem.
Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 »
Todas as propriedades CSS Fundo
| Propriedade | Descrição |
|---|---|
| background | Define todas as propriedades do fundo em uma declaração |
| background-attachment | Define se uma imagem de fundo é fixo ou pergaminhos com o resto da página |
| background-color | Define a cor de fundo de um elemento |
| background-image | Define a imagem de fundo para um elemento |
| background-position | Define a posição inicial de uma imagem de fundo |
| background-repeat | Define como uma imagem de fundo será repetido |