How to find transparent background location in image?

I have a HTML code where I will place text in the transparent background area of an image. Since I don't know how to get the exact coordinate on the fly using JS or HTML, the only solution I was able to start was using the pyautogui Python library. But I was also not being able to find the correct transparent area coordinate.

PSD and PNG files shared from my OneDrive: Pictures

I will pass the coordinate to this style:

.code-container {
    position: absolute;
    top: 250px;
    left: 500px;
    transform: translate(-50%, -50%);
}

I tried with Python, but can be another solution as well. My Python code:

import pyautogui
import os
import pathlib
from PIL import Image

# Load your PNG file and cut out the desired image
Img = os.path.join(os.path.sep, pathlib.Path(__file__).parent.resolve(), 'test.png')

image = Image.open(Img)
image.show()

alpha_channel = image.split()[-1]  # get the alpha channel
transparent_pixels = []

for x in range(image.width):
    for y in range(image.height):
        if alpha_channel.getpixel((x, y)) == 0:
            transparent_pixels.append((x, y))
            pyautogui.moveTo(x, y)

print(transparent_pixels)

The output was not in the transparent area, and I don't know how or why.

So my question is, how can I find that transparent area coordinate to pass to my HTML code no matter the app opens the image or the Windows theme?

On Photoshop I can see the background:

When I open with Paint I can see the white area:

But when I open the image using the PIL Python library, it opens from "Photos" Windows app, and the color there is black in this case:

And the color found using the pyautogui.displayMousePosition() function is: X: 966 Y: 634 RGB: ( 28, 32, 44)

----- UPDATE -----

What I need is to place a code where in the midle of this transparent background area, but this is what I am getting:

Solution

import os
from PIL import Image


image_url = 'transparent_area.png'
image = Image.open(image_url).convert('RGBA')
all_pixels = image.load()
image_width, image_height = image.size[0], image.size[1]
all_transparent_pixels = []

for i in range(image_width):
    for j in range(image_height):
        p = all_pixels[i, j]
        if p[-1] < 255:
            all_transparent_pixels.append([i, j])

left_top_corner = all_transparent_pixels[0]
right_bottom_corner = all_transparent_pixels[-1]

print(left_top_corner, right_bottom_corner)

Below test on your image (which is 1.24 MB). Coordinate problem solved

Log from PyCharm:

Coordinates from Photoshop

UPDATE for second question

<html>
    <head>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            body {
                background-image: url('transparent_area.png');
                background-repeat: no-repeat;
            }

            .code-container {
                display: flex;
                justify-content: center;
                align-items: center;
                width: calc(671px - 1px - 369px);
                height: calc(627px - 1px - 588px);
                position: absolute;
                left: 369px;
                top: 588px;
                border: 1px dashed #000;
            }
        </style>
    </head>
    <body>
        <div class="code-container">
            <span>this is code</span>
        </div>
    </body>
</html>

Screenshot of RESULT

without border change: width: calc(671px - 1px - 369px) for width: calc(671px + 1px - 369px), height: calc(627px - 1px - 588px) for height: calc(627px + 1px - 588px) and delete border: 1px dashed #000;

NEW UPDATE

For getting all 4 coordinates use output from code below:

print('left_top_corner (x: ' + str(left_top_corner[0]) + ', y: ' + str(left_top_corner[1]) + ')')
print('right_bottom_corner (x: ' + str(right_bottom_corner[0]) + ', y: ' + str(right_bottom_corner[1]) + ')')

in css it will be:

width: calc(right_bottom_corner.x - 1px - left_top_corner.x);
height: calc(right_bottom_corner.y - 1px - left_top_corner.y);

LAST UPDATE

I managed to solve your question. But coordinates are not one of the unknown problems. In addition to the coordinates, there are many other unknowns variables: paddings, applying on background image a css-property scale(), using <br> as paddings. When changing which it will also be necessary to pick up the values left and top for .code-container

changes:

        .code-container {
            display: flex;
            justify-content: center;
            align-items: center;
            width: calc(671px - 1px - 369px);
            height: calc(627px - 1px - 588px);
            position: absolute;
            left: calc((100% / 2) + 226px - 369px );
            top: calc(172px + 588px);
            border: 1px dashed #000;
            z-index: 1;
        }

        .image {
        max-width: 100%;
        height: auto;
        margin-bottom: 30px;
        transform: scale(1.3);
        z-index: 999;
        }