In the old days of designing webpages, we usually use an individual image file for a logo and an icon. With the use of CSS, a single image file can be shared with many icons. I know you don’t understand what I am saying up to now. Hm…. let’s me take an example to explain it.
Take a look at the following picture file (icons-group.jpg):
The above image file contain 6 icons that will be used for your webpages. Of course you can use more icons. It all depends on your need.
In order to explain more easier, I use red lines to separate the icons. The size of each icon is 100×100 pixels, as shown below:
It’s time see how can we use the icons for different page title of web page with CSS.
1. Prepare a very simple web page.
<h1>Fun With CSS Background Image Position</h1>
<div id=”icon”></div>
<div id=”title”><h2>Hello World</h2></div>
Pay attention to the styles of icon Div layer only which will be used to display the icons.
#icon { width: 100px; height:100px; background-color: #090; float: left; }
The webpage will look like:
In order to show the icon Div layer, I use a green background color.
2. Now use the icon file (icons-group.jpg) for the background of the icon Div layer and see what will be the effect.
For all cases the background-repeat property is set to no-repeat. Of course it doesn’t matter in this example, but this is a good practice.
Case i)
Background-position(x): 0px;
Background-position(y): 0px;
Result:
The top left icon will be shown.
Let’s continue in horizontal direction (x-axis).
Case ii)
Background-position(x): -100px;
Background-position(y): 0px;
Result:
The top middle icon will be shown.
Case iii)
Background-position(x): -200px;
Background-position(y): 0px;
Result:
The top right icon will be shown.
Let’s continue with the second row of icons.
Case iv)
Background-position(x): 0px;
Background-position(y): -100px;
Result:
The bottom left icon will be shown.
Case v)
Background-position(x): -100px;
Background-position(y): -100px;
Result:
The bottom middle icon will be shown.
Case vi)
Background-position(x): -200px;
Background-position(y): -100px;
Result:
The bottom right icon will be shown.
Here’s a summary of CSS Background Image Position.
Download:
Click here to download the source files
As you can use the desired icons will be shown by adjusting the horizontal and vertical direction of the background image.
Leave a Reply