I'm trying to set an image in HTML and want text to run over it. But when I use the following code the text will run under the image.
HTML
<div id="titel">
<img src="images/titel.jpg" alt="titel">
<h3>Titel</h3>
</div>
CSS
#titel
{
float:left;
width:220px;
height:100px;
margin:0px 5px 5px;
}
h2
{
position:absolute;
}
You need to add position:relative to the titel div and a top value to the image.
#titel {
float:left;
width:220px;
height:100px;
margin:0px 5px 5px;
position:relative;
}
h3 {
position:absolute;
top:0;
}
jsFiddle example
Another option is to set the image as the background image of the div, and dispense with the positioning altogether.
jsFiddle example
(note also that in your example you have a h3 element but in your CSS you were targeting a h2 element.)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With