How to make text appear on top of image - html

Question

I am trying to make my text appear ontop of my background image. I have tried playing around with the z-index and positioning, but cannot seem to get it right.
Here is my HTML:
<div id="float-left">
<div id="triangles">
<img src="img/trianglebackground.png" id="tripic">
</div>
<div id="float-left-text">
<img src="img/portrait.png" id="port">
</div>
</div>
Here is the CSS I have currently:
#tripic {
z-index:1;
height: 550px;
width: 500px;
text-align: center;
opacity: 0.2;
position: relative;
}
#float-left {
float: left;
/*background: url('img/trianglebackground.png') no-repeat center;*/
background-size:500px 550px;
background-color: #03C9A9;
height: 550px;
width: 50%;
z-index:0 ;
position: relative;
}
#float-left-text{
text-align: center;
z-index: 100;
position: absolute;
}
#port {
height: 200px;
width: 125px;
}
Right now, the entire #floatlefttext section is below the background image, whereas I would like it to be ontop. I have tried to use background-image, but I am not sure it's going to be the best way to get the results I would like. Any advice would be great, thanks!

Answer 1

I created a fiddle for you here: https://jsfiddle.net/0w1max4f/
#floatlefttext{
text-align: center;
z-index: 100;
position: absolute;
top: 0px;
left: 0px;
}
Is this what you were looking for? Since your html didn't actually include any text elements (just an image) to be placed on top of the background, but hopefully this will help you anyway.
What I did was to clean up your html (you had some tags that were not properly closed, for example the images and some divs) and add top and left to you absolute positioned div.
You were using absolute and relative positioning correctly but forgot to specifiy where the absolute positioned item were supposed to be placed.
here's a good article about positioning if you want to learn more:
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Answer 2

Something like this
<div style="position: relative; background: url(path to image); width: (width)px; height: (height)px;">
<div style="position: absolute; bottom: 0; left: 0.5em; width: 400px; font-weight: bold; color: #fff;">
<p>(text to appear at the bottom left of the image)</p>
</div>
<p style="position: absolute; top: 1em; right: 2em; width: 120px; padding: 4px; background-color: #fff; font-weight: bold; font-size: 11px;">
(text to appear at the top right of the image)
</p>
</div>
Be aware that you should separate the css from the html

Answer 3

Fiddle: Text ontop of an image and linkage
CSS:
div.image-container
{
width: 400px;
}
a.imagewrapper
{
width:inherit;
}
img.theimage{
width:inherit;
}
a.teasertext
{
position: absolute;
padding-top: 1%;
color: #fff;
line-height: 1.2em;
text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
letter-spacing: .02em;
font-size: 1.5em;
overflow-wrap: break-word;
overflow-y: hidden;
-webkit-transition: all .3s;
transition: all .3s;
font-size: 41px;
width:inherit;
}
HTML:
<div>WOOP DE DOO</div>
<div class="image-container">
<a class="teasertext" href="www.stackoverflow.com">Text on the image, wow amazing !</a>
<a class="imagewrapper" href="www.stackoverflow.com">
<img class="theimage" src="http://img.thesun.co.uk/aidemitlum/archive/01667/THUNDER620_1667926a.jpg">
</a>
</div>
<div class="image-container">
<a class="teasertext" href="www.stackoverflow.com">Text on the image, wow amazing !</a>
<a class="imagewrapper" href="www.stackoverflow.com">
<img class="theimage" src="http://img.thesun.co.uk/aidemitlum/archive/01667/THUNDER620_1667926a.jpg">
</a>
</div>
<div>WOOP DE DOO</div>