1

I have different sprite-sheets (.png). e.a. Head, Eyes, Nose, Mouth. And I use them to dynamically build faces using css (sass).

I build a face using different layers and sprites using the background-position.

<span class="face caucasian-face">
    <span class="caucasian-eyes-1">
        <span class="caucasian-nose-2">
            <span class="caucasian-mouth-1">
                <span class="caucasian-chin-2">
                </span>
            </span>
        </span>
   </span>
</span>

This works very well and I am able to combine face elements to construct different faces.

The css of the .face class:

.face {
    background: transparent url('../images/face-palette.png');
    width: 160px;
    height: 160px;
    z-index: 1;
}

Css example of the overlay sprites:

.caucasian-nose-1,
.caucasian-nose-2 {
    width: 28px;
    height: 21px;
    left: 20px;
    top: 23px;
    z-index: 2;
    background: transparent url("../images/face-sprites.png");
    background-position-x: -66px;
    background-position-y: -80px;
}

.caucasian-nose-2 {
    background-position-x: -226px;
}

So all the dimensions are calculated based on 160px 160px.

The .face class is basically a wrapper. The face-palette.png has the same dimensions as the .face class (160px 160px) and all the overlay elements (eyes, nose etc. .png) are also setup at 160px 160px. So overlaying all without messing with the dimensions works fine.

Problem:

What I want is to be able to resize the .face wrapper to e.a. 80px 80px and that all overlay elements resize accordingly. Tried it with inheritance and background-size (%). But can't seem to get it working.

Anyone has experience with this? Is my approach correct? And, hopefully, someone can help me with this.

cimmanon
  • 67,211
  • 17
  • 165
  • 171
therebelcoder
  • 929
  • 11
  • 28
  • Is the face-palette.png a sprite? Can you show the CSS definition of the other classes? Did you have a look at http://stackoverflow.com/questions/18500801/resizing-background-sprite-image-to-fit-div?rq=1? – crackmigg Mar 21 '16 at 10:46
  • No, the face-palette.png is a default background (head and face outlining) and functions as a backdrop. The rest however are sprites. I will add an example of the other css definitions. – therebelcoder Mar 21 '16 at 10:49
  • It would be the easiest to get help if you could include a plnkr that shows what you have. I guess you need some `background-size` settings. But how exactly do you plan to "resize"? Mouse dragging? Window? – crackmigg Mar 21 '16 at 10:53
  • The plunkr is a problem since there is a lot of (SASS generated) css involved and images. I did however update my question with the .css from a overlay sprite. I re-size with media-queries. e.a. 160x160 on a big screen, 80x80 on a mobile phone. – therebelcoder Mar 21 '16 at 11:02

0 Answers0