Existem várias propriedades envolvidas na manipulação de imagens de background.
Felizmente, a propriedade background cuida de todas as outras.
body {
background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
}
Esse código une essas propriedades:
- background-color, que nós já vimos antes.
- background-image, que é o endereço da imagem que vai servir de fundo.
- background-repeat, que é como a imagem se repete na página. Pode ser repeat-y (repetindo no eixo y, de cima até embaixo), repeat-x (repetindo no eixo x, lado a lado), repeat (repetindo nos eixos x e y, efeito semelhante a um telhado, por exemplo) ou no-repeat (que mostra apenas uma ocorrência da imagem).
- background-position, que pode ser top (topo), center (centro), bottom (parte inferior), left (esquerda) e right (direita), ou uma combinação de dois desses elementos. Nesse caso, o primeiro indica a posição no eixo horizontal e o segundo a posição no eixo vertical.
Imagens de background podem ser usadas na maioria dos elementos HTML – não apenas pra página inteira (body) e podem ser usados pra efeitos simples mas eficazes, como bordas arredondadas.
É fácil se envolver demais com imagens de background e querer usá-las na página inteira. Algumas pessoas visualmente hiperativas podem acreditar que é uma boa ter uma foto cheia de cores vivas em todo o fundo da página, dando ao usuário o desafio de decifrar o texto no primeiro plano. Isso é um exemplo meio radical, mas o fato é que o texto mais amigável ao usuário, legível, é fonte preta em um fundo simples branco ou fonte branca num fundo preto. Algumas pessoas defendem que um fundo “quase” branco ou “quase” preto é melhor, já que reduz a claridade. Sugiro que você teste essas possibilidades e escolha a que você achar mais adequada ao seu projeto.
O melhor uso pra imagens de background é preencher espaços onde não haja nenhum conteúdo, deixando a página mais visualmente agradável sem atrapalhar o conteúdo.
Páginas Relacionadas
- Próxima Página: Tutorial Avançado de HTML
- Página Anterior: Propriedades Atalho
- Cores (Tutorial Iniciante de CSS)
- Imagens (Tutorial Iniciante de HTML)
Exemplos
- Imagens de background
- Ocorrência única – usando background-repeat
- Bordas Arredondadas 1 – usando imagens de background menores
- Bordas Arredondadas 2 – em caixas de altura e largura variáveis
Referência
Esse material é uma adaptação do CSS Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.
[...] Próxima Página: Imagens de Background [...]