CODEWITHSUNDEEP
csssassbourbon
infinity
infinity

Reputation: 719

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?

Upvotes: 0

Views: 313

Answers (1)

meskobalazs
meskobalazs

Reputation: 16041

Use the background-size property:

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

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

Upvotes: 1

Related Questions