Publicado por: Paulo Fernandes | 26/nov/2008

img ou background – Qual Devo Usar???

Opa!

Faz tempo que não posta né galera. Fim de ano as coisas são corridas aqui na empresa, ainda mais com mudança.

Este artigo deverá ser bem rápido, mas espero que ajude muitos a escolher a melhor forma de usar as imagens.

Uma dúvida que apareceu há algum tempo, creio que seja no Fórum Imasters, ou em algum outro lugar é a seguinte:

Quando devo usar a tag img ou a propriedade do CSS background?

Na minha opinião, a tag img deve ser usada quando queremos de fato inserir uma imagem na página HTML.

Já o background deve ser usado quando queremos colocar um fundo em algum elemento da página ou usar o IR ( Image Replacement ).

Isso é uma coisa muito óbvia.

Mas o que devemos fazer quando a empresa não tem um logo bem definido, o logo da empresa é escrito no Photoshop com uma fonte bonita?

Nesse caso se você usar apenas a imagem, não é muito recomendavel, pois se o cliente estiver com um navegador modo texto ou algum programa leitor de tela não conseguirá ler a imagem( eu sei que é até possível ler pelo atributo alt, mas não vamos entrar em detalhes ). E usar via CSS com a propriedade background, também não é muito legal, pois vai que o CSS não é carregado? ( não estou levando em contato as técnicas de IR  – Image Replacement em consideração OK? )

Nesta situação recomendo que seja utilizado as duas coisas dá seguinte forma.

HTML

<h1>Texto <img src=”imagem.jpg” alt=”Texto” /></h1>

e no CSS

h1 {
background:#FFFFFF url(imagem.jpg) no-repeat scroll left center;
color:#FFFFFF;
font-size:1px;
text-indent:-99999px;
}

Bom por hoje é somente isso!

Caso tenha algum erro ou problema.

Pode postar um comentário que lhe ajudarei.

Abraço e até o próximo.

Anúncios

Responses

  1. Olá, amigo. Parabéns pelo blog e pela facilidade com que vc transmiste a mensagem. Bom, eu sou artista gráfico e não compreendo programação de dados, embora eu sempre arrisque uma coisa ali ou outra aqui, mesmo sem entender de fato. Mas estou decidido a aprender bem o HTML, o CSS, MySql, PHP, JAVA etc, mesmo que seja o basicão, porque me ajudará muito. Mas enquanto isso, preciso de uma pequena ajuda.

    Acabo de hospedar o meu blog WordPress e já fiz a instalação, tudo direitinho. Comecei a customizar o tema e uma dúvida surgiu: “Como é que eu insiro uma imagem pequena PNG com fundo transparente em um ponto específico da tela? Gostaria de adicionar pequenos ícones em pontos estratégicos da tela. No link fiz um preentscreen do que eu quero:

    http://a1.vox.com/6a0123f16490e4860f01240bd2fab1860e-500pi

    O blog é: vegvox.com.br

    Abço!

  2. […] do seu site com a fonte Arial??? Simples demais né? Pois bem, no CSS2 utilizavámos a técnica de ImageReplacement. Uma técnica muito útil para ser sincero. Porém como o desenvolvimento dos sites usam como base […]

  3. obg gay


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

Categorias

%d blogueiros gostam disto: