Como faço para o tamanho do plano de fundo funcionar no IE?

188

Existe alguma maneira conhecida de fazer o estilo CSS background-sizefuncionar no IE?

JD Isaacks
fonte
1
Que efeito você está tentando obter?
ZippyV
@ZippV Eu tenho uma div que tem cerca de 250 pixels de largura. mas a imagem de fundo tem 300 px de largura. Quero que a imagem de plano de fundo se encaixe completamente (tamanho do plano de fundo: 100%) para que não seja cortada. Em seguida, no :hoverque eu quero o tamanho do fundo para mudar a largura 300px completo (background-size: auto) para criar a ilusão de zoom
JD Isaacks
1
Você pode obter o mesmo efeito usando uma tag img. Se você precisar de alguma coisa, use o z-index.
ZippyV
1
@ John considere alterar a resposta aceita se a solução alternativa de Dan funcionou para você!
Pekka
@ZippyV A tag IMG às vezes tem efeitos colaterais desnecessários, por exemplo, pode ser selecionada ou clicada com o botão direito do mouse. Às vezes, tudo bem, outras não.
peterh - Restabelece Monica

Respostas:

312

Um pouco tarde, mas isso também pode ser útil. Há um filtro do IE, para o IE 5.5+, que você pode aplicar:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale')";

No entanto, isso dimensiona a imagem inteira para caber na área alocada; portanto, se você estiver usando um sprite, isso poderá causar problemas.

Especificação: AlphaImageLoader Filter @microsoft

Dan
fonte
12
Eu me pergunto por que a MS não implementou apenas essa funcionalidade usando CSS. Muito obrigado!
Martin Andersson
2
Quais versões do IE suportam isso, por favor?
ᆼ ᆺ ᆼ
8
Se você estiver usando links e botões dentro do elemento que definimos, esses links e botões não funcionarão. Alguém conhece um método para corrigir isso?
rubyprince
2
Eu tive que adicionar position: relative; z-index: 999para a entrada, um, botão dentro dessas divs
rubyprince
10
O método de escala não mantém a proporção. Portanto, é melhor que seu elemento tenha a mesma proporção que sua imagem.
Yves Van Broekhoven 31/08/2012
45

Criei jquery.backgroundSize.js : um plug-in jquery de 1,5K que pode ser usado como um fallback do IE8 para os valores "cover" e "contem". Dê uma olhada na demo .

Louis-Rémi
fonte
12
De acordo com a documentação de jquery.backgroundSize.js, o plug-in foi descontinuado e eles recomendam o polyfill de tamanho de plano de fundo .
usar o seguinte comando
A versão atualizada não funciona background-position: fixed.
Ryan Burney
@VOIDHand Tanto o filtro eo polyfill não funcionou para mim, eu usei jquery.backgroundSize para o sucesso
Chris Marisic
21

Graças a este post, meu CSS completo para a felicidade entre navegadores é:

<style>
    .backgroundpic {
        background-image: url('img/home.jpg');
        background-size: cover;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='img/home.jpg',
        sizingMethod='scale');
    }
</style>

Faz tanto tempo que eu trabalhei neste código, mas gostaria de adicionar mais compatibilidade ao navegador. Anexei isso ao meu CSS para obter mais compatibilidade com o navegador:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Scott Dallas
fonte
@ Gaurav123 try-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
honk31
5
isso faz com que o ie8 exiba a imagem de fundo duas vezes - uma com dimensões redimensionadas e a segunda com um fundo grande e sem tamanho.
arekk
ie7: parece bom, mas não pode mais clicar nos links. (Por IE7 locais Govt muito lento para atualizar?)
Robbie Matthews
5

Ainda mais tarde, mas isso também pode ser útil. Existe o plugin jQuery-backstretch-plugin que você pode usar como um polyfill para background-size: cover. Eu acho que deve ser possível (e bastante simples) pegar a propriedade css-background-url com o jQuery e alimentá-lo com o plug-in jQuery-backstretch. Uma boa prática seria testar o suporte ao tamanho do plano de fundo com o modernizr e usar este plugin como substituto.

O backstretch-plugin foi mencionado no SO aqui . O jQuery-backstretch-plugin-site está aqui .

De maneira semelhante, você pode criar um plugin ou script jQuery que faça o tamanho do plano de fundo funcionar em sua situação (tamanho do plano de fundo: 100%) e no IE8-. Então, para responder à sua pergunta: Sim, existe uma maneira, mas o ATM não existe uma solução plug-and-play (ou seja, você mesmo precisa codificar).

(aviso: não examinei o backstretch-plugin completamente, mas parece fazer o mesmo que background-size: cover)

metatron
fonte
5

Existe um bom polyfill para isso: louisremi / background-size-polyfill

Para citar a documentação:

Faça o upload de backgroundsize.min.htc para o seu site, juntamente com o .htaccess que enviará o tipo MIME exigido pelo IE (somente Apache - ele é construído em nginx, nó e IIS).

Em qualquer lugar que você use o tamanho do plano de fundo no seu CSS, adicione uma referência a este arquivo.

.selector { 
    background-size: cover;
    /* The url is relative to the document, not to the css file! */
    /* Prefer absolute urls to avoid confusion. */
    -ms-behavior: url(/backgroundsize.min.htc);
}
Dorian
fonte
Esse polyfill simplesmente funciona. background-size: cubra ou contenha no IE8. Sem confusão, sem confusão.
precisa saber é o seguinte
essa abordagem suporta ambos containe cover. Ele contém 5,7 KB não muito ruim porque será transferido em um pacote de rede.
precisa saber é o seguinte
2

No Windows 7 do IE11, isso funcionou para mim,

background-size: 100% 100%;
Jana
fonte
0

Eu tentei com o seguinte script -

.selector { 
background-image: url("img/image.jpg");
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
}

Funcionou para mim!

Bulla
fonte
para qual versão?
Nhiser