How to fix the IE's background-size:cover issue?

Question

I have searched the web for solutions, but all of them were talking about how to set the background for the whole page...but i need to fill out a certain section of the page....how can i do that?

Here's what we have.....on our page, we have several different sections and in one of them i need to set the image's background-size to "cover" (this is the only time i am using this property). This is the php function I'm using to generate img tag:

function getRandomFeatureVideo()
{
// Youtube feed
$xml = simplexml_load_file('https://gdata.youtube.com/feeds/api/playlists/A4F160EDF82713A2?v=2');
.
.
.
.
$media = $entry->children('http://search.yahoo.com/mrss/');
  
  // get video player URL
  $attrs = $media->group->player->attributes();
  $watch = $attrs['url'];
  
  $attrs = $media->group->thumbnail[1]->attributes();
  $thumbnail = $attrs['url'];
  $counter++;

  if($counter == $rand)
    { break; }

  $result .='<a rel="prettyVideos"  href="'.$watch.'">
                <img alt="" style="background:url('.$thumbnail.')" src="/images/ytIndex_overlay.png" />
       </a> ';      
    
echo $result;                    
}

and CSS:

.slideshow .video img
{   
cursor:pointer;
width:550px !important;     
height:340px !important;     
background-repeat:no-repeat;    
background-size:cover;
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover;
-ms-interpolation-mode: bicubic;
}

So far it's working exactly how I was hoping for in Chrome, Safari, Firefox and Opera. enter image description here

However, as usually, it's messed up in IE (7/8) enter image description here

How can i fix this?

IE7 and 8 don't support `background-size`. What IE8 *does* support is an `-ms-filter` that allows you to superimpose a stretched image, as well as `box-sizing` which is an entirely different thing. — BoltClock, Jul 25 '12 at 19:43
Take a look at this question: http://stackoverflow.com/questions/2991623/make-background-size-work-in-ie — Ben L., Jul 25 '12 at 19:48
BoltClock and Ben, thanks for your responses. I tried to use the solution posted in the above post earlier but they are using a fixed image for their source (src='images/logo.gif') whereas my sources will be random (style="background:url('.$thumbnail.')" ...here the $thumbnail is randomly picked). i am just confused how I can use that -ms-filter fix for myproblem — AlwaysANovice, Jul 25 '12 at 20:28
possible duplicate of [Best work-around for CSS3's background-size in IE](http://stackoverflow.com/questions/8381712/best-work-around-for-css3s-background-size-in-ie) — dgw, Jul 27 '12 at 12:04

score 2 · Answer 1 · answered Jul 25 '12 at 21:00

IE7 doesn't support background-size in any way. It can only show the image at it's natural size.

The only way around this is to switch to using an <img> tag, and layer it behind the element, so that it looks as if it were the background.

You could do that in your code; it's not difficult. But it would be a shame to waste the existence of the background-size feature in every other browser.

So my preferred solution would be to use a polyfill Javascript, which would backfill the feature in older versions of IE so that you can keep using the standard CSS.

You could try this one: https://github.com/louisremi/jquery.backgroundSize.js

Hope that helps.

Thank you Spudley...this is new :) I am going to try this and let you know. — AlwaysANovice, Jul 25 '12 at 21:38

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

I found someone having a similar problem. Maybe you could check this: css background-size cover in internet explorer 7

edited May 23 '17 at 12:13

Community

1
1

answered Jul 25 '12 at 19:51

Shadowizoo

147
1
2
17

Thank you Shadowizoo for sharing the post, i read it earlier and tried those suggested fixes (including the Technique #1 from http://css-tricks.com/perfect-full-page-background-image/) ...but nothing worked. Thanks for your response though! – AlwaysANovice Jul 25 '12 at 20:14

score 0 · Answer 3 · answered May 21 '13 at 21:36

I had to drop this issue to work on other stuff, but thought should give you guys an update on this. This problem is (kind of) fixed...not a solid solution, but it is working with this easy fix.

So here is the modified CSS...

.slideshow .video img { cursor:pointer; width:550px !important; height:340px !important; -moz-background-size:cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; background-position:center;}

and the IMG tag...

<img alt="" style="background:url('.$thumbnail.')" src="/images/ytIndex_overlay.png" style="background-repeat: no-repeat" style="background-size:cover"/>

(i know it's messy!) THANK YOU Spudley, Shadowizoo, BoltClock and Ben for your time and suggestions.

How to fix the IE's background-size:cover issue?

3 Answers3