Postagens | Dicas blog, Imagem, Pc Windows

O que faz se imagem de fundo de site com background-size não aparece no Internet Explorer?

Mostrarei uma maneira de tentar resolver ou burlar o problema de background-size que não funciona na versão 8 e anteriores do navegador Internet Explorer da Microsoft.

Colocar imagem de fundo extra para vc ver no IENum artigo anterior mostrei maneiras de usar o background-size em Css, mas, não dei nem uma solução para o navegador IE(Internet Explorer), e, sabendo que muitos usuários do Windows ainda usam a versão 8 do IE pode ser vantagem ter algo, porém, poderá 'afetar' versões posteriores.

O procedimento abaixo é para pessoas que entendem de Css e consiste em aproveitar um 'bug' IE e usar uma imagem de fundo diferente para ele.

Background-size é uma 'nova propriedade' Css que permite mudar o tamanho de imagem de fundo, isso funciona na maioria das versões mais recentes do Mozilla Firefox e Google Chrome, e, essa função de aumentar ou diminuir a imagem de fundo usando Css é muito útil para deixar o site ou blog mais leve e até um possível melhor aproveitamento da imagem.

A imagem que terá tamanho manipulado pelo Css é:
Imagem de fundo que será redimensionada pra quem não está vendo com Ie
pequena-plano-fundo.png
A imagem de fundo para o IE eu usarei o logotipo(símbolo) dele:
Imagem de fundo opcional para IE
fundo-IE.png

Para entender você terá que acessar e ver como fica com o IE e com os outros navegadores que citei acima, se tudo ocorrer como esperado, ao acessar com o IE vai ver a menor imagem acima(logotipo do IE) repetindo e com outro navegador verá a outra imagem que é uma 'paisagem' e expandida no centro

Exemplo e código Css que aproveita bug do IE

div{
background:#bbb url(/imagens/fundo-IE.png) center center repeat;/*IE*/

background:#999 url(/imagens/pequena-plano-fundo.png)center center no-repeat;

background-size: 401px 250px;


height:254px;overflow:auto;width:407px;
}

Como bug do IE pode ser usado para fundo diferente no IE?

O bug eu deixei em destaque, já ficará o alerta para quem nunca o percebeu antes, mas, logo após o fechar parênteses da Url tem o center encostado nele e isso dá um tipo de erro ou má interpretação no IE que não reconhece o background, sendo assim, após o fechar parênteses) da Url precisa um espaçamento, mas esse mesmo caso não ocorre para os outros dois dos navegadores mais utilizados pelos internautas daqui. Assim, dá para tirar um proveito de um erro ou bug. Para o Internet Explorer, pelo menos a versão 8 e 7 valerá o primeiro background.

E, pelos testes que fiz verificando o cache, as imagens que não são usadas no navegador também não são baixadas, ou seja, o IE não vai baixar a pequena-plano-fundo.png e os outros dois navegadores não irão baixar a fundo-IE.png

Acho que isso me permite tentar uma brincadeira interessante:

Acima tem uma div com esse código Css abaixo, se você entendeu antes vai entender...:
background:transparent url(http://3.bp.blogspot.com/-huN51w2-Ads/UY05yjBmVJI/AAAAAAAAGww/1zJGMJc81l8/s1600/COM-IE.png) left center no-repeat;
background:transparent url(http://3.bp.blogspot.com/-T6unUCOe29Y/UY056T1wvMI/AAAAAAAAGw4/9PMGHwZHCJs/s1600/SEM-IE.png)left center no-repeat;
height:50px;display:block;width:100%;background-size:contain;


Claro que a solução não precisaria ser essa, poderia ser a mesma imagem mas repetindo, ou o background para o IE não precisaria ter imagem, aqui no blog mesmo, pelo menos na data deste post eu optei por não usar a imagem de fundo para o IE, talvez eu mude isso no futuro.

Nenhum comentário:

Postar um comentário

→Dê sua opinião. Faça comentário relacionado ao post.
Comentário com e-mail será excluído
Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)

Comentário reflete a opinião do comentarista. Desde já, Obrigado!

Postagens Populares