How to get text over image, and is also responsive?

Question

I have text over my image but it is not responsive. When it scales the text comes over the other text.

this is my css

#laatstenieuws > img{
position: relative;
width: 100%;
height: 38.4em;
float: left;
}

#laatstenieuws{
width: 50%;
float: left; 

}

#tekstnieuws{
position: absolute;
z-index: 100;

}

#tekstnieuws > h2{
color: black;
text-align: center;
padding-top: 4em;


}

#tekstnieuws > h3{
font-size: 20px;
text-align: center;
padding-top: 5em;
padding-left: 1em;

}

#tekstnieuws > p{
text-align: center;
padding-top: 3em;
padding-left: 2em;

}

has anyone an idea how to make is scalable?

Answer 1

Well I think this fixed part of it. https://jsfiddle.net/8n743xpL/1/

<div id="blogblokken" style="float: right;">

Answer 2

I'm not 100% sure what you're after, but to me it looks like removing position: absolute; from #tekstnieuws fixes things.

If not, you should add an absolute link to the image URL in the JSFiddle so we can see the image.

You may also benefit from removing the image from the HTML and adding it as a background image to the div.