Css sprite in div with width %?

Question

Is possible to have an image of Css sprite in div with width in % ?

Now i tried this but not works:

.sprite-gloss-vulc {
    background-image: url("/images/sprite-img.png");
}

.sprite-gloss-vulc-anello { 
  background-position: -1px -0px; 
  width: 120px; 
  height: 120px; 
}

#flex {
 width: 17%;
}

img {
  width: 120px; 
  height: 120px; 
}


<div id="flex">
    <img src="/images/transparent.gif" class="sprite-gloss-vulc sprite-gloss-vulc-anello">
</div>

When the width of div parent is bigger than 120px (width img) works, but if i resize the page the css sprite is "cut". Is cut because the news width of div it is smaller, but sizes .sprite-gloss-vulc-anello they are still the same.

I hope you can forgive me for my english and help me.... Thanks a lot!

Possible duplicate of [responsive sprites / percentages](http://stackoverflow.com/questions/21810262/responsive-sprites-percentages) — Pete, Sep 27 '16 at 10:24

score 1 · Answer 1 · edited Sep 27 '16 at 19:37

1

You are giving height width and twice to img tag and the class

.sprite-gloss-vulc {
    background-image: url("/images/sprite-img.png");
}

.sprite-gloss-vulc-anello { 
  background-position: -1px -0px; 
  width: 100%; 
  height: 100%; 
}

#flex {
 width: 100%;
}

edited Sep 27 '16 at 19:37

worldofjr

3,868
8
37
49

answered Sep 27 '16 at 10:33

FishMan

127
2
11

score 0 · Answer 2 · answered Sep 27 '16 at 10:26

Unfortunately you can't use sprite image with percentage.

You can add max-width property to sprite-gloss-vulc-anello or img tag but i wont work either.

If you want to resize image dynamically based on parent div you should use it as a seperate image file.

Css sprite in div with width %?

2 Answers2