1

I'm working on a website and I have a grid of icons, where each row is a different icon and each column is a different shade. The grid of icons is stored in a .png format, like this:

enter image description here

To access a specific icon I have the following in my CSS and html : <i class="icon type1 blue>...</i> This works really well but the issue is I need to make the icons a bit smaller so I made my png 75% smaller. But now the issue is that it's showing the same icon but it's showing half of the blue icon and half the gray icon, like this:enter image description here

How can I show only the blue icon at a scale of 75%? Here is the CSS code where the image (at full size is set): 

.icon{
  background-image: url('images/icons.png');
  background-repeat: no-repeat;
  width: 28px;
  heigh: 28px;
  display: block;
  font-style: normal;
}
user3746602
  • 433
  • 1
  • 6
  • 15
  • Can you post a fiddle? – Dan Jul 25 '14 at 17:44
  • You'll have to adjust the values of `background-position` set in `.type1` and `.blue`. – agrm Jul 25 '14 at 17:54
  • you need to change the size of the block also by 75%. According to `math` that value is 21px. adjust your block height and width to 21px. also make sure your background positions increment by 21 as well. – Grapho Jul 25 '14 at 18:19

3 Answers3

0

you can try

background: url(images/yourimage.jpg) no-repeat center center fixed;

see: Stretch background image css?

or you can also try background-size: 100%; in css3

Community
  • 1
  • 1
Jero Franzani
  • 473
  • 6
  • 19
0

try something in this format 

background-image: url('images/icons.png') leftposition topposition;

left position and topposition will depend on your sprite image(grip of icons)

for example

 background-image: url('images/icons.png') -28px 0;
Ashish Balchandani
  • 1,228
  • 1
  • 8
  • 13
0

Here's an approach that uses one sprite file and instead of resizing the sprite "physically," individual icons are resized using CSS. Here's a fiddle: http://jsfiddle.net/89mGj/.

HTML:

<ul class = "regular">
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul class = "regular small">
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS for .regular:

.regular > li {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: url(http://i59.tinypic.com/v4crk2.png)
                no-repeat
                -340px -280px/680px;
}

.regular:not(.small) > li:nth-of-type(2) {
    background-position: -30px -321px;
}

.regular:not(.small) > li:nth-of-type(3) {
    background-position: -30px -485px;
}

The approach is basic. A sprite is used as a background-image that does not repeat. Then, for each list item only the background-position of the sprite is changed to display an appropriate icon.

Here's CSS to display smaller icons:

.regular.small > li {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 3px;
    background-position: -255px -210px;
    background-size: 510px;
}

.regular.small > li:nth-of-type(2) {
    background-position: -23px -241px;
}

.regular.small > li:nth-of-type(3) {
    background-position: -23px -363px;
}

The background-position coordinates and background-size are multiplied by 0.75 to create smaller icons (i.e., 680px * 0.75 = 510px).

DRD
  • 5,557
  • 14
  • 14