# Question about CSS & images.

## Recommended Posts

Say I have two images like these: If I want to show a partly filled star, is it possible to do this with CSS trickery, without having to actually create the intermediate images? I get the feeling that I should be able to, using overflow and so on, but it would probably take me a whole day to figure it out :)

##### Share on other sites
Hm... Put the empty one as a background image for a div or something. Then, put the filled one in that div. Change the width or height of the filled star's picture via CSS.

Well, that's off the top of my head, but it's worth a shot!

##### Share on other sites
The part I'm stuck with is how to change the width without it scaling the image... I want the image to be clipped instead.

Does anyone know what CSS properties are involved here? Because if I can make it work, then a little javascript could make for a pretty sweet effect.

##### Share on other sites
You can use a span to show an effectively cropped image instead of the image tag.

.star_background {	width: 22px;	height: 20px;	background-image: url(star_empty.png);	background-repeat: no-repeat;}.star_foreground {	display: block;	width: 11px;	height: 20px;	background-image: url(star_full.png);	background-repeat: no-repeat;}

<div class="star_background"><span class="star_foreground"></span></div>

The star_foreground class here has width 11px, to show the star half full.

By the way, those two images aren't exactly aligned - the empty one is 1 pixel smaller in both dimensions so when you use the above css/html it looks off - fixing the images so they are the same size (and match up) should fix it.

##### Share on other sites
That's wonderful, thank you so much for your help.

## Create an account

Register a new account

• ### Forum Statistics

• Total Topics
627700
• Total Posts
2978690

• 20
• 14
• 12
• 10
• 12