treehouse : what would you like to learn today?
Web Design Web Development iOS Development

background-size: cover - IE7/8

  • Hello there...

    Is there a CSS solution to the background-size: cover in IE7 / 8?

    Using it on the image area of a slider...I need to be able to move the background image around on certain breakpoints too..which is why I've included background position...

    <section id="hero">
        <ul class="slides">
          <li>
            <div class="img" style="background-image: url('images/xxx.jpg');"></div>
            <div class="slideContent">
              <h1>Heading</h1>
              <p>Content</p>
              <a class="more" title="Learn More" href="#">Learn More</a>
            </div>
          </li>
    
        </ul>
      </section>
    

    CSS

    #hero .slides .img { background: no-repeat left top; background-size: cover; background-position: 0px -112px;}
    

    The issue on IE7/8 is that it displays at 100% size, not 100% to the container so you just see the top left of the image.

  • Background-size is not supported below IE9.

    Only thing I can think of is an IE specific stylesheet for older versions.

    Other solutions might offer themselves up if we knew the context...is this a sprite or something?

    Do you have a link?