CODEWITHSUNDEEP
htmlinternet-explorercss
AlwaysANovice
AlwaysANovice

Reputation: 993

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

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?

Upvotes: 1

Views: 6360

Answers (3)

AlwaysANovice
AlwaysANovice

Reputation: 993

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.

Upvotes: 0

Spudley
Spudley

Reputation: 168655

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.

Upvotes: 2

Shadowizoo
Shadowizoo

Reputation: 157

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

Upvotes: 0

Related Questions