25 de julho de 2007

Inserindo imagens com CSS

E ai pessoal, tudo bem?
O post de hoje é sobre uma técnica pouco utilizada, mas que pode aumentar a velocidade de carregamento do site,essa técnica é de inserir imagens usando css.



Esta técnica consiste em utilizar a propriedade background-image do css para inserir a imagem.É parecido com o image-replacement só que não vai trocar texto por imagem e sim adicionar uma imagem onde não há nada.Chega de conversa e vamos para a ação:



HTML



...
<body>
<span class="imagem">&nbsp;</span>
</body>
...

Um span vazio onde a imagem vai ser inserida.



CSS



.imagem {
background-image: url(imagem/imagemcss.jpg); /* Insere a imagem */
width: 150px;/* Faz a largura ficar igual a da largura da imagem de exemplo */
height: 150px;/* Faz a altura ficar igual a da altura da imagem de exemplo */
}

Insere a imagem "imagemcss.jpg" que esta dentro da pasta "imagem", como plano de fundo do span que tem a classe "imagem",e como o span está vazio,aparece somente a imagem,do mesmo jeito que aconteceria se fosse usado a tag <img>.


Inserindo imagem em um texto



Se você quiser utilizar uma imagem ao lado de um texto,também é simples.É só utilizar a propriedade padding para dar um espaço antes ou depois e a propriedade background-position,para definir em que parte do elemento ela vai aparecer.Veja o exemplo:


HTML



...
<body>
<p class="imagem">Um pequeno texto com uma imagem inserida pelo css na esquerda.</p>
</body>
...

CSS



p.imagem {
background-image: url(imagem/imagemcss.jpg); /* Insere a imagem */
background-position: top left;
padding-left: 10px;
}

O padding-left adiciona um pequeno espaço na esquerda do paragrafo,ou seja, antes de começar o texto "Um pequeno..." vai ter um pequeno espaço (de 10px) e o background-position põe a imagem exatamente nesse espaço.



Mas antes de sair que nem um maluco trocando todas as suas img (html) por background-image (css), saiba quando usar uma ou outra. Background-images só devem ser usadas quando essas imagens forem meramente decorativas (ou seja, não tenham nenhum valor semântico e só servem pra deixar a pagina mais "bonitinha"), se a imagem for realmente importante para entender o texto, use a tag <img> para inseri-la e use o atributo alt para oferecer um texto alternativo a imagem (com css não é possível fazer isso).


Qualquer duvida é só entrar em contato comigo pelo comentario ou pelo e-mail.
[]s
Tags:

7 comentários:

Carlos Eduardo disse...

Tudo pode variar de acordo com as necessidades do desenvolvedor.

Substituir uma tag IMG por um background não é aconselhável, até porque essa tag tem sua semântica, seu significado no site.

Como você disse, se a imagem possui aspecto meramente decorativo, deve-se utilizá-la como background mesmo, para não sujar o código do site :)

Guido disse...

Isso mesmo Carlos, as tags img tem sua importância que o css nāo vai substituir,até porque o css nāo é para marcaçāo e sim para estilizaçāo.

Obrigado pelo comentario =)

Carol disse...

Olá!
Queria saber como faço pra colocar uma imagem num Item box do multiply.com já tentei modificar meu css de várias maneiras mas não consigo...

bjos

Greg disse...

Ajudou Muuito. inda mais que não queria carregar pelo códivo html, então fiz no css. valew

ADIMILSON B. SILVA disse...

Parabéns cara,
Eu gostaria de saber como colocar texto por cima depois de colocada a imagem com css?

se possível pode mandar a resposta pro meu e-mail?
adimilsonb.silva@gmail.com

valeu brigadão

Fabio Paes disse...

Boa tarde.

Estou cirando um site no LojaIntegrada e gostaria de saber se é possível carregar um código já existente no editor css?

José Chiwila Chiwila disse...

Pessoa boa noite, sou verdinho no mundo das liguagens de programação e de marcação, e estou tentando construir um site que tenha um fundo com imagem... Estou tentando acessá-la à partir do código:

#logo{
width: 900px;
height: 150px;
background-image:url(../imagens/logo.jpg);
}

Revi o endereço, o nome dela, tudo correcto...
Ainda assim a imagem não é mostrada na página... Alguem pode ajudar por favor?
Desde já obrigado peala atenção que irá merecer...