css sprites please help!!

[robert.access]

hi all!

i have the following problem.

 

I have made my site a while ago and now I realise that using sprites image it's better, so I have the folling code in my css:

#pagtop_info{background:url(www2/img/pagetop.gif) no-repeat;width:987px;height:100px;position:relative}

 

 

the image it's in a div.

 

now my sprite image it's

 

<style type="text/css">
    div {
        background: url('result.png');
    }
  </style>

and the same imge as above it's called from 

<div style="background-position: -0px -0px; width: 200px; height: 54px"> </div>

 

how to combine this to keep the same structure and have the image from sprite image????

 

Please help! Thank you in advance!

[haku]

I know CSS sprites, but I can't understand your question.

[robert.access]

)

well first thank you for trying to help.

 

I have my site made and it's working fine but i use css.

So background images are called from css.

now I make a big image with all images inside, and to call a specific image from the big one (sprite) with for example: " background position: -30px -20px;", but this image it's already called in my "old" css and I need to combine Old css with new "position: -30px ...."

 

I don't know if I made myself clear, but I can try to explain again

[PHP Monkeh]

I'm struggling to understand your question as well.  Do you want to keep the same structure but just change the sprite image?

 

<style type="text/css">
#pagtop_info {
        background-image: url('result.png');
}
</style>

 

That would replace the image of #pagtop_info while keeping the other values in place.  You would then need to give your new DIV an ID of 'pagtop_info'

[haku]

I still don't understand what you are asking either, but here is an example of what a rollover looks like (example image attached):

 

HTML:

<a class="example">Off</a>

 

CSS:

a.example
{
background:url(rollover.png) no-repeat left top; /* image */
display:block;
height:0; /* pushes text down */
overflow:hidden; /* hides pushed-down text */
line-height:normal; /* fix for opera and safari */
padding-top:50px; /* height of half the image */
width:150px; /* width of image */
}

a.example:hover
{
  background-position: left -50px; // the second number shifts the image vertically the number of pixels entered. This should be half the height of the image.
}

 

[attachment deleted by admin]

[robert.access]

thank you! really apreciate!