write text on image as responsive

Question

I want to write text on factor image like this image that text and image be responsive for example in row 1 in column unit price I write price and then this image in other screen be here and don't change it location

I wrote on image with this site:https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_text but when I change text location for set on the your location it in the other screen changes location

Answer 1

Your problem here is that you have not responsive text, when your image becomes small and font-size does not change resulting in incorrect position. Everything needs to be in sync. This is an example, you need to calculate to make your content more accurate.

.invoice {
            position: relative;
        }
        .balance {
            position: absolute;
            bottom: 14%;
            right: 14%;
            font-size: 2vw;
        }


        @media only screen and (max-width: 768px) {
            .balance {
                bottom: 14.2%;
            }
        }
        
        @media only screen and (max-width: 500px) {
            .balance {
                bottom: 14.5%;
            }
        }

<div class="invoice">
        <img style="width: 100%" src="https://i.sstatic.net/odI4u.png" alt="">
        <span class="balance">10000</span>
    </div>