I have 2 lines that I want to place on my website on the background. I draw an example lines on a 1920×1620 page. I want these 2 red lines to be on the background. But when I try to copy the sizes from Figma (W and H to left and top) I get the wrong placement at all.

Here’s the way my lines look like in Figma:
Line1
Line2

And here’s how they being displayed in my browser:
result

index.html:

   <div class="background">
                <img src="assets/Line1.png" alt="line_1"
                                     class="line_1">
                <img src="assets/Line2.png" alt="line_2"
                                     class="line_2">
   </div>

styles.css:

.background img {
    position: absolute;
}

.line_1 {
    left: 1291pt;
    top: 417pt;
}

.line_2 {
    left: 1315pt;
    top: 671pt;
}

How do I resolve it? Thanks!