Grow your CSS skills. Land your dream job.

IE8 fix for background-size property? Retina Image

  • # September 27, 2012 at 5:34 pm

    Hi!

    Wonder if someone can help out.

    I am using the following CSS for Retina images and it works perfectly in FF, Chrome, Safari but not in IE.

    Is there a fix for IE for using background-size – and if so, how could I implement it using my current code?

    CSS:
    `.arrow-big-right {
    display: block;
    width: 42px;
    height: 48px;
    margin-bottom: 1.8em;
    background-image: url(arrow-big-right.png);
    background-repeat: no-repeat;
    background-size: 42px 48px;
    }`

    HTML:
    `

    `

    Can someone explain how I fix this for IE?

    Many thanks for any help :-)

    # September 27, 2012 at 6:02 pm

    There is no retina display that will be using IE8, you don’t need this.

    # September 27, 2012 at 10:36 pm

    I’m thinking the issue is probably that the background image is too big for the container though.

    What you want to do is make a 42×48 version of the image also and in your IE8 only stylesheet change the background to something like

    background-image: url(arrow-big-right-ie.png);

    # September 28, 2012 at 3:59 am

    Agreed @TheDoc. No retina display will ever use IE8.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".