CODEWITHSUNDEEP
css
JoaMika
JoaMika

Reputation: 1827

Half Size for CSS Sprite

I have a CSS sprite which shows country flags in 32px vertically stacked.

I am trying to reduce the size to 16px with this code but the flag is not reduced to 16px. What could be wrong here?

.flag {
  display: inline-block;
  height: 16px;
  width: 16px;
  vertical-align: text-top;
  line-height: 16px;
  background-size: 50% 50%;
  background: url(../images/flags.png) no-repeat;
}

.it {
  background-position: 0 -1920px;
}
<span class="flag it"></span>

Upvotes: 1

Views: 51

Answers (1)

DaniP
DaniP

Reputation: 38252

Your actual problem in addition to the order on the properties is you think % on background-size will scale the original size of the image but the property doesn't work that way, it is relative to the container so you actually need to set it to be 100% of the container:

.flag {
  display: inline-block;
  height: 100px;
  width: 100px;
  vertical-align: text-top;
  line-height: 50px;
  background: url('http://placehold.it/200x400/fcf?text=MIDDLE') no-repeat;
  background-size: 100%;
}

.it {
  background-position: 0 -100px;
}
<span class="flag"></span>
<span class="flag it"></span>
<h3>Original Image size</h3>
<img src="http://placehold.it/200x400/fcf?text=MIDDLE"/>

Remember you also need to change the values you have before for the background position and reset to the 16px relation.

Note: I have used different dimensions just to make more clear the example scaling from 200 to 100.

Upvotes: 2

Related Questions