Need to show cropped image under another image

Question

I have 5 stars on a line, and 2 kind of pictures empty and filled. I need to crop by css filled one, under empty, so that it looks like percent of fillness. But looks like I have problems with standart crop approach. Can you suggest ideas?

Answer 1

I’d use two nested containers and do it somehow like this:

#outer {
    background: url('empty.png') top left repeat-x #666666;
    position: relative;
    height: 16px;  /* set this to the height of the image */
    width: 80px;   /* set this to a multiple of the image’s width */
}

#inner {
    background: url('filled.png') top left repeat-x #999900;
    position: absolute;
    top: 0;
    left: 0;
    height: 16px;  /* same as above */
}

Set the width property on the inner container via inline CSS as needed:

style='width: 32px;'
style='width: 64px;'

(It doesn’t necessarily have to be a multiple of one image’s width.)

Bonus: If your images don’t use transparency, the fallback background colors of the CSS will make up for percentage bars if the images fail to load.