Struggling to showcase HTML elements, like forms and text, on an image that has been rendered transparent using GIMP. Despite various attempts, the content remains hidden behind the image.
To rule out browser interference, I modified the page's background color - confirming that the transparency is not being altered to white inexplicably.
Experimenting with the z-index attribute proved futile in solving the issue.
Upon refreshing the page, the text does briefly appear correctly before being obscured by the image overlay.
#foo{
position: relative;
}
#foo img{
width: 20%;
height: 20%;
}
#bar{
position: absolute;
}<!DOCTYPE html>
<body>
<div id='foo'>
<img src='my_img' />
<div id='bar'>
<!--This is where I want to write what will be displayed on the transparent image.-->
</div>
</div>
</body>No similar scenarios were found, neither here nor on external websites; hence, any suggestions are greatly appreciated.
Edit: In hindsight, setting the top and left CSS properties resolved the issue.