Text is absolutely positioned but hides the relative image beneath it - html

Question

So, in my HTML, I've put an Image which is responsive (changes size when browser window is changed). Now, on the top of it, I want to put my title (or you can say text). But the image is only appeared as a strip. It is displayed as a whole when you re-size the window very small. And when I change my text's position to absolute over the image which position is relative, everything disappears.
Here's my HTML:
<style>
.large-header {
position: relative;
width: 100%;
background: #333;
overflow: hidden;
background-size: cover;
background-position: center center;
z-index: 1;
}
.candh_container .large-header {
background-image:url('http://i.imgur.com/vkfDo1I.jpg');
}
.main-title {
/* position: absolute; */
margin: 0;
padding: 0;
color: #000000;
text-align: center;
margin-right:auto;
margin-left:auto;
}
.container_candh .main-title {
text-transform: uppercase;
font-size: 4.2em;
font-family:Montserrat;
}
</style>
<div class="candh_container">
<div class="large-header">
<h1 class="main-title">Candh Inc.</h1>
</div>
</div>
Here's the fiddle : http://jsfiddle.net/ysksx5nu/

Answer 1

The problem is, that you used your image as a background, so it won't take any space. You have to scale the image itself to 100% width, and specify no height, so the ratio is kept.
<style>
.bg_image {
width: 100%;
}
.candh_container {
position: relative;
}
.main_title {
position: absolute;
color: #000000;
text-align: center;
margin-right:auto;
margin-left:auto;
z-index: 1;
width: 100%;
top: 0px;
}
</style>
<div class="candh_container">
<img src="http://i.imgur.com/vkfDo1I.jpg" class="bg_image" />
<h1 class="main_title">Candh Inc.</h1>
</div>
Check this: http://jsfiddle.net/ysksx5nu/1/