Fun with CSS Background Image Position

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

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>