css text on the image - css

Question

I have an image which has to take full width. And I need to put a text and a button on top of it in a specific place. I looked over many topics but can not figure out how to make it fully responsive.
<div class"wrapper">
<div class="image-box">
<img src="x">
</div>
<div class="content-box">
<h1>text goes there</h1>
<a>anchor tag goes there</a>
</div>
</div>
so this is the layout but it can be changed if it gets me to the point I need.
If I understand correctly the parent div called wrapper should be set to position: relative and all the child divs to position: absolute, after that you just position all these child elements with top, left, right, bottom. So after testing this this is what I get. Since the image is always 100% of the viewport it gets smaller and smaller by height and width because of its aspect ratio. The text and button on the image just stays at a fixed place and after some point it goes out of the image.
Whats my mistake?
P.S found a lot of topics but still, I am messing something up. Thank you for your insights and help.

Answer 1

The image tag is used to create a separate element on the page. This is not really what you want... you want the content-box to have a background, right? Rather than using the image tag, use CSS to apply a background image.
here is a jsfiddle
.content-box {
/* set width and height to match your image */
/* if these are omitted, it will only be as big as your content, */
/* and only show that much of your image */
width: 200px;
height: 300px;
/* obviously, replace this with your image */
background:url('http://placecage.com/200/300');
}
<div class"wrapper">
<div class="content-box">
<h1>text goes there</h1>
<a>anchor tag goes there</a>
</div>
</div>

Answer 2

I think this is what you want. Also, this is a good occasion to use those HTML5 tags figure
and figcaption, but basically all you need is this kind of structure:
<div class="wrapper">
<img />
<div class="content-box">
<!-- Your content here -->
</div>
</div>
So what is happening here is that your wrapper's dimensions are fixed by the image, and then you position absolutely your content-box or the elements within. If you do not want to position them at the very top or bottom of your image, just use percentage values when positionning:
top: 10%;
figure {
position: relative;
}
figure img {
width: 100%;
height: auto;
}
figure figcaption {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0;
background: rgba(255,255,255,.7);
padding: 10px;
}
<figure>
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" />
<figcaption>
<h1>The image title</h1>
<p>This is the image caption</p>
</figcaption>
</figure>