background image from part of png file - html

Question

I have this image:
How can I used part of the .png file as an image? I want to use upper part for my <a class="non_check"> and lower part for my <a class="checked"> classes as background.

Answer 1

You're going to want to use CSS image sprites. With image sprites, you can show just the part of the image you want to use.
For example:
a.checked {
width: 20px;
height: 20px;
display: block;
background:url('image_here.png') 0px -20px;
}
a.unchecked {
width: 20px;
height: 20px;
display: block;
background:url('image_here.png') 0px 0px;
}
The background property defines the image that will be the background of the div.
The numbers following the image link define the position (the first number is the left and the second number is the top).
JS Fiddle Example
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

Answer 2

You should use appropriate CSS. You could combine fixed width and height and background, background-position properties, like this:
.checkbox
{
width: 23px;
height: 42px;
background: url(checkbox-icons.png);
}
.checkbox.unchecked
{
background-position: 0 0;
}
.checkbox.checked
{
background-position: 0 -21px;
}
Fixed size causes only the desired rectangle of the background to be visible and by changing the background-position property, you can define exactly which fragment should it be.

Answer 3

You need a layer (like DIV or SPAN) half the height of an image.
You place the image to the background and by setting background-position, you can move the image parts to the view or out.

Answer 4

You will be using background-position for this with a :hover. Something like this:
.checkbox {
background:#ffffff url('checkbox.png') no-repeat 0 0;}
width:23px
height:21px;
}
.checkbox:hover {
background:#ffffff url('checkbox.png') no-repeat 0 21px;}
width:23px
height:21px;
}