I discussed how to use CSS to display icons by adjusting the x and y position in one of my post – Fun with CSS Background Position. In this post, I use the width and height in pixels to adjust the x and y position of the background image. Actually we can also use “%” to adjust the x and y position of background image.

This time, I use a different image file:

In this example, the oversize of the image is 300 x 200 pixels. Each icon occupying a space of 100 x 100 pixels.

Once the icons are layout on an image file, they can be displayed individually by adjusting the x-position and y-position.

The CSS styles to display a background image is:

background-image:url(‘icons-group.jpg’);

However we can use background-position property to adjust the horizontal (x) and vertical position (y) of the background image being displayed:

background-image:url(‘icons-group.jpg’);
background-position: x% y%;

Let’s show how to display the icons one by one by adjusting horizontal (x) and vertical position (y) of the background image being displayed:

Displaying Icons Group on Upper

This can be achieved by:

  • adjusting the “%” of x-position, while
  • maintain y-position to “0%”

The following examples illustrate how to display the icons on the upper.

Displaying Icons Group on Lower

This can be achieved by:

  • adjusting the “%” of x-position, while
  • maintain the y-position to “100%”

The following examples illustrate how to display the icons on the lower.

I tested with Firefox and Internet Explorer, the icons are displaying normally.

Download:
Click here to download the source files