How to fill in a white part of a given image?

Hello all,

The library we are using is jquery.

Here’s the design:

Inside the middle image, the background should be white.
But if it’s white, I believe we can’t achieve the mask effect.

Here’s the css part of it:

Can we “fill in” incrementally bottom-up, with a red color, like the picture above ?

Does anyone have a clue about how to make this happen please ?

Someone with an in-depth knowledge of CSS would I think be best at this stage. When then CSS technique is nailed down, JavaScript can then be used to make the few adjustments that are needed to automate things.

I’ll move this over to the CSS forum for now, to see if anyone there can help.

You are correct.

The image in your fiddle does not match your example png. No black wavy pattern.

The image with the wavy line will need solid edges and a transparent center (the opposite of the fiddle image) so a red background-color can show through.

Yes, the inside white (besides the small curvy border between black and red) has to be transparent, the rest is pasted as a rectangle covering the page-background and the horizontal line.
If it is a dynamic level meter, then the img is in the foreground, and has a white background color.
Now you can use a red background image and move that dynamically up and down with the background-position.
So it is an image with a background image! :slight_smile:

(Something [U]like this[/U] in “The port-hole theory: positioning of background-images in css”)