Pls help:Superimpose a headline over an image in a retool custom component

App Building
1

I have been struggling to have headline text superimposed over a custom retool component. For some reason, the text refuses to move onto the image despite adjusting the absolute positioning via CSS. Maybe there is another CSS style interfering but I can’t seem to figure it out. :frowning:
Here is my Gist: https://gist.github.com/beachead/857845f01c088602247af0c654b8f9c1
Note: Paste the model text into the model (after removing the comments) and the rest in the component.
I’m been spending hours on this, so if anyone could help me I would be so grateful and would gladly give the first person who solves this a $100 amazon gift certificate. (my apologies if this offends anyone.)

2

Hello! Sorry for the late reply here, but this should work in a text component. Can you try it out?

3 
<img class="text-on-image--image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg"/>
<p class="text-on-image--text">
Hello World!
</p>
</div> 
<style>
.text-on-image
{
height:400px;
width:400px;
position:relative;
} 
.text-on-image--image
{
position:absolute;
left:0;
top:0;
}
.text-on-image--text
{
z-index:100;
position:absolute;
color:white;
font-size:24px;
font-weight:bold;
left:150px;
top:350px;
}
</style>```
4

`


Hello World!

.text-on-image { height:400px; width:400px; position:relative; } .text-on-image--image { position:absolute; left:0; top:0; } .text-on-image--text { z-index:100; position:absolute; color:white; font-size:24px; font-weight:bold; left:150px; top:350px; } `
5

asdf asd fasdf asdf asd fasdf

6

`


Hello World!

.text-on-image { height:400px; width:400px; position:relative; } .text-on-image--image { position:absolute; left:0; top:0; } .text-on-image--text { z-index:100; position:absolute; color:white; font-size:24px; font-weight:bold; left:150px; top:350px; } `
7

`


Hello World!

.text-on-image { height:400px; width:400px; position:relative; } .text-on-image--image { position:absolute; left:0; top:0; } .text-on-image--text { z-index:100; position:absolute; color:white; font-size:24px; font-weight:bold; left:150px; top:350px; } `
8

Source: https://stackoverflow.com/questions/8708945/how-to-position-text-over-an-image-in-css

9

(I modified it slightly to use classes instead of ids)