CODEWITHSUNDEEP
htmlcssresponsive-designretina
Rst00
Rst00

Reputation: 93

CSS Sprites RWD + Retina

I can't find any useful sugestions about my problem, so I decided to write a new topic.

I'm trying to use a CSS Sprite feature and it work very well for small images, but if I want to "cut" bigger part of sprite - it's not responsive. I want to use a exact 2 times bigger image for Retina and mobile displays too.

There is my code:

.sprites {
    background-image: url('../images/sprites.png');
    background-repeat: no-repeat;
    background-size: 1221px 1018px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {
    .sprites {
        background-image: url('../images/[email protected]');
    }
}

and then I'm defining class:

.bag {
    width: 20px;
    height: 20px;
    background-position: -2px -2px;
}

As you can see, I defined background-size in the main sprite class which is using for all divs/spans and then just give a width/height/background-position for the element. It's good for small images like icons, but if I have headers (eg. 500px x 100px) so this too big for small devices.

I found the solutions here: responsive sprites / percentages to defined values by percentes but it's not going working in my case.

Do you have any solutions to resolve this case?

Have a nice day!

Upvotes: 3

Views: 180

Answers (1)

vals
vals

Reputation: 64164

I think that the solution would be

.sprites {
    background-image: url('../images/sprites.png');
    background-repeat: no-repeat;
    background-size: 1221px 1018px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {
    .sprites {
        background-image: url('../images/[email protected]');
        background-size: 2442px 2036px;  /* the real size of the image */
    }
}

.bag {
    width: 20px;
    height: 20px;
    /* bkg calculus: 2px / 1221px   2px / 1018 */
    background-position: -0,1638% -0,19646%;
}

Upvotes: 1

Related Questions