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
Leave a Reply