Tutorial Intermediário de CSS: Imagens de Background

19 03 2008

Página com Imagem de Background

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

Exemplos

Referência

BlogBlogs Tags: , ,

Esse material é uma adaptação do CSS Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

Anúncios

Ações

Information

8 responses

2 05 2008
Tutorial Intermediário de CSS: Propriedades Atalho « Codando

[…] Próxima Página: Imagens de Background […]

14 01 2010
victor

parabéns pelo site, é um ótimo conteudo, me ajudou bastante!!!

Obrigado

28 01 2010
Rodrigo Cavalcante

Muito bom, obrigado!

14 11 2010
Kurosaki913

Queria saber como eu posso criar em CSS esse Box do seu site ( que vais os Codes )

Imagem :

Se puder, poste como, mto obrigado. Parabéns pelo seu site.

14 11 2010
Kurosaki913

Esqueci de postar a imagem :

Imagem : http://img13.imageshack.us/img13/4171/boxe.png

8 01 2011
Gabi

Esse “box” seria o text area (caixa onde se colocam os códigos)?
Em HTML o comando é simples:

(TEXT_AREA) Seu texto (/TEXT_AREA)
(troque os parênteses pelas tags)

Mas dá pra personalizar livremente usando o css. Dá pra mudar borda, background, tamanho e até se quer a barra de rolagem escondida ou não \o\

Seeilá, espero ter ajudado ^.^

XD

13 03 2012
reuel

REuel abner
gostei muito me ajudou pra caramba

28 06 2012
Diene Oliveira

“visualmente hiperativas” é eufemismo pra mau gosto??? hauhaua… #brinks
gostei muito do post. Parabéns!

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




%d blogueiros gostam disto: