views:

215

answers:

3

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.

A: 

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/

Steve Wortham
almost but not quite, still need the div to grow when possible
minus4
A: 

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 !!!!

minus4
jsut push enter between lines within the box: you've probably got unusual line endings when you pasted in.
Eric
yeah tried the enter key but pushed it out of the code box
minus4
+1  A: 

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.

Traingamer
as suspected a real pain in the but so decided easiest method was to have the curve in a separate file, it is only one extra image... shame really
minus4