1 reply [Last post]
samuraijack
Offline
newbie
Last seen: 12 years 3 weeks ago
Joined: 2008-03-09
Posts: 1
Points: 0

Hi Everyone,

I'm building a Firefox only web app (yippie!) so specific solutions of the '-moz-' variety are fine!

Is there a way of setting a elements' background image to be a small section (of a larger image). Think, -moz-image-region, applied to a background image.

I'm trying to reduce the number of HTTP requests made for a page that has a lot of small, different background images. They are all similarly sized and can be tiled into one image. The idea then being I could extract and display a different portion for different elements.

I've been experimenting with varieties of,

.flags32 span {
width: 32px;
height: 22px;
display: inline-block;
background-image: url(../im/flags-32.png);
}

.flags32 span.UK {
-moz-image-region: rect( 0px, 268px, 22px, 236px );
}

Unfortunately this doesn't work. Other properties I've played with (and with no success are) background-clip and clip. The mozilla reference to -moz-image-region is found here

Thanks for your time,

Peter

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 12 hours 41 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

Can you put a test case

Can you put a test case online for us to play with?

& welcome to CSSCreator.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.