CODEWITHSUNDEEP
css
Sefam
Sefam

Reputation: 1773

Scaling a spritesheet in CSS

I'm having an issue where as soon as I use the background-size property, it seems to reduce the size of the background rather than increase it.

div.someelement{
    z-index: 100;
    position: fixed;
    background: url('spritesheet.png') no-repeat;
        background-size: 200% 200%;
        background-position: 0px 0px;
    width: 50px;
    height: 55px;
    margin: auto;
    left: 0;
    top: 0;
    bottom: 0;
}

I'd expect background-size: 200% 200% to double the scale of the spritesheet. The element in the spritesheet is actually 100px per 110px, and I'm trying to scale it down to this 50x55 box. What am I doing wrong and how can I achieve that?

I also don't care about IE8 compatibility.

Upvotes: 0

Views: 119

Answers (3)

Asons
Asons

Reputation: 87303

If you want to show a 524x451 size image in its original size, you need to count its scale/size based on the div's size, which will, in your case, be 524/50 = 10.48 (1048%) for its width.

And then, to make the 100x110 fit inside a 50x55 sized div, it has to be half of 1048, 524 (and using the same math for its height will give you 410).

div {
  z-index: 100;
  position: fixed;
  background: url(https://i.sstatic.net/BdDOg.png) no-repeat;
  background-size: 524% 410%;
  background-position: -50px -50px;
  width: 50px;
  height: 55px;
  margin: auto;
  left: 0;
  top: 0;
  bottom: 0;
}
<div>
</div>

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196276

If the box and the image have the same ration then use background-size:cover; or background-size:contain;

Update after comments

When using percentage values in background size, it is based on the dimensions of the element it is applied. So 200% on a 50px element will make the background image be 100px.

In you case you are better off using actual pixels, and since you want the background to be half its original size just set it to 

div.someelement{
    /*.. other properties ..*/
    background-size: 262px 225.5px;
    /*.. other properties ..*/
}

Upvotes: 0

vals
vals

Reputation: 64264

Probably your image is larger than 100px.

If the div is 50px, and you set the bakcground size to be 200%, it means 200% of 50px, so your background will have a size of 100px.

If the native size of the image is bigger, then you are shrinking it. Not making it twice bigger.

Upvotes: 1

Related Questions