The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

how to fully stretch background image that works in IE??

  • # July 29, 2011 at 1:33 am

    hi, i have a code here that stretch the background image..and works perfectly in Google and Firefox…but as usual,,,not with Internet Explorer…

    background-image: url(../Photos/logo_back%20copy.jpg);
    background-size: 100% 100%;
    background-repeat: repeat;

    and this is the code i got for IE versions:

    /* for IE 8 */


    /* for lower IE */


    the code for IE works..but how can i use it? i mean how can i strict my CSS to use that code just for IE and not for other browsers? thanks a lot

    # July 29, 2011 at 1:53 am

    hi @sl1dr:
    i have seen they are using this to solve the issue:

    but how can i use it inside my CSS???

    # July 29, 2011 at 2:10 am

    Follow the instructions Chris gives in CSS Only Technique 1 or 2.

    # July 29, 2011 at 2:12 am

    hi, i created a different stylesheet only for IE for the background issue

    ..but nothing seems to happen??

    # December 5, 2012 at 6:01 am

    In modern browsers you can now use the CSS3 property background-size

    .selector {
    /* will stretch the image so that it covers all of the element */
    background-size: cover;
    /* will stretch the image so that it fits perfectly inside the element */
    background-size: contain;

    This allows to achieve background stretching while preserving the aspect ratio of the background-image:

    I’ve personally developed a polyfill that implements those properties in IE8:

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed