how to show section of a CSS sprite within a set position on the whole html body

Question

hi there.

I use sprite sheets for my css, adn they work great, however i want to have a section of my sprite sheet on the footer it is like a curved block and the left hand content boxes will come over the top of this a little.

however i cant seem to get a section of a sprite as a background positioned at the bottom.

now normally you would do something like this

background:url(sprite.png) -20px -144px no-repeat; display:block; width:800px; height:225px;

but when i try something like this

background-color: #ffffff;
font-size: .75em;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
color: #000000;
height:100%;
width:800px;
background-image:url(images/sprite.jpg); 
background-position:0 0 no-repeat bottom left;

i get the full sprite sheet as the background..... so my question is is it possible to only get a section of a sprite and use that section as the bottom section of a div !!!!

bit of a mouthful, but i dont want to just bin this idea, if it can be done, someone has done it already.

Answer 1

So you're trying to show a section of an image inside a container that's larger than the section you want to show?

If so, check out the clip property. Here's an example of it:

#myDiv {
   width:400px; height:300px;
   background:url(sprite.png);
   clip:rect(100px,250px,150px,100px);
   position:absolute;
}

http://www.julienlecomte.net/blog/2007/07/4/

Answer 2

hiya thanks, could not get it going on the body so i added a container div:

min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -4em; background:url(images/sprite.jpg) no-repeat;     clip:rect(0,800px,270px,0); position:absolute;

however it restricts the div size to the size of the clipping being done, where as my plan is to always have this down at the bottom of all my content

please forgive it being on one line, the box wont let me add all the code in one block !!!!

Answer 3

Put it in a nested fixed size div within the footer section. If you want the footer div to grow, but don't want the size of the sprite to exceed its limits, that's pretty much the only way.