1 reply [Last post]
Last seen: 13 years 5 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,


gary.turner's picture
Last seen: 6 weeks 5 days ago
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Can you put a test case

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

& welcome to CSSCreator.



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