Image behing an image


#1

Hello, im trying to make an app that monitors how much water u drink daily, on one page user gives input on how much water he drank that day, on the other, i have a picture of a body that i want to be “filled” with blue based on how much water user drank so far, the more he drinks the more the body “fills”. My question is how do i do this ? I thought of process where i put a picture of blue as a background behind the picture of the body and based on liters drank the picture height will increase. Although im not sure if this is the correct way to do it and i havent managed to find anything relating to having a picture as a background of another picture. Im using ionic2/Angular2/TS

somthing like this: https://gyazo.com/5d0d5ef1fb2a5b9e5856900245396558


#2

I would try it this way:
You create an element that contains the image of the body (solid are around the body, transparent body). Then you set different background-images for the container element depending on how much the user drank (1px wide images repeated horizontally). (Maybe you can even set a background-image for the image itself - never tried that before)


#3

I was thinking more of using 2 images on top of each other, i used z-idex in my css file to determent which one if on top, now all i need it to calculate a percentage from liters drank and multiply it with height of the blue image in background, problem is i dunno how to the only way how to move the image atm is by changing the top and height attribute like so:

  1. https://gyazo.com/dd8d9067df0c3976bdb7285ef6014f5b
  2. https://gyazo.com/367571050b6179038a0d7f8305c95de7
  3. https://gyazo.com/af5448ba04c5854e2a76bf18d684cb14

so i substract the same amount from top that i add to height but i already have a variable in AddLiquidPage where i calculate the liquidDrank. Is there any way how to connect it to the height of the blue background image ? or just to promote the height attribute to a variable ?