Search code examples
csssassbourbon

Retina image not scaling down

I'm using Bourbon.io (http://bourbon.io/docs/#retina-image) to have a retina image for a picture:

Here's my html:

<div class='image'>some text that will get hidden</div>

and my css:

.image {
   @include retina-image(image, top left);
   height: 300px;
   width: 300px;
   background-repeat: no-repeat;
   text-indent: -31445px;
}

I have both a image.png(that is 300x300 px) and a image_2x.png (600x600 px). Right now, its showing the retina image, but its displaying at 600*600 (so it's cut off and you can only see the top left of the image. How do I get it to scale down to fit inside 300*300?

Solution

  • Use the background-size property:

    .image {
    ...
    background-size: 300px;
    ...
}

    MDN specification link here, and a demo example is here.