Need help making h1 appear over-top of image - html

Question

I've got a few lines of type set in a stylized h1 (type is skewed, underlined with border, etc). I'd like the h1 to appear over the top of the "bg-image" div class, but I'm having trouble. I'm new to using DIV structure.
.bg-image h1 {
display:inline-block;
font-size:48px;
font-family: "sofia-pro",sans-serif;
font-weight:900;
text-transform:uppercase;
color:#fff;
border-bottom:7px solid #fff;
padding-bottom:5px;
margin-top:4px;
-webkit-transform: rotate(-15deg) skew(-15deg, 0);
-moz-transform: rotate(-15deg) skew(-15deg, 0);
-ms-transform: rotate(-15deg) skew(-15deg, 0);
-o-transform: rotate(-15deg) skew(-15deg, 0);
transform: rotate(-15deg) skew(-15deg, 0);
text-transform: uppercase;
}
.bg-image {
position: relative;
}
.bg-image img {
display: block;
width: 100%;
background-size:cover;
max-width: 2000px; /* corresponds to max height of 450px */
margin: 0 auto;
}
<div class="bg-image">
<img src="http://s27.postimg.org/h12ymqn9v/Web_Hdr_Bground_1.jpg">
<h1>Nobody</h1>
<br>
<h1>Ever Says</h1>
<br>
<h1>Seize</h1>
<br>
<h1 class="skewed">Tomorrow.</h1>
</div>

Answer 1

You can use background-image on .bg-image class so you have more control.
Like this:
.bg-image h1 {
display:inline-block;
font-size:48px;
font-family: "sofia-pro",sans-serif;
font-weight:900;
text-transform:uppercase;
color:#fff;
border-bottom:7px solid #fff;
padding-bottom:5px;
margin-top:4px;
-webkit-transform: rotate(-15deg) skew(-15deg, 0);
-moz-transform: rotate(-15deg) skew(-15deg, 0);
-ms-transform: rotate(-15deg) skew(-15deg, 0);
-o-transform: rotate(-15deg) skew(-15deg, 0);
transform: rotate(-15deg) skew(-15deg, 0);
text-transform: uppercase;
}
.bg-image {
position: relative;
width: 500px;
height: 500px;
background: url('http://s27.postimg.org/h12ymqn9v/Web_Hdr_Bground_1.jpg') center;
background-size: cover;
}
<div class="bg-image">
<h1>Nobody</h1>
<br>
<h1>Ever Says</h1>
<br>
<h1>Seize</h1>
<br>
<h1 class="skewed">Tomorrow.</h1>
</div>

Answer 2

You have to play with position: relative and the distance in pixels you feel like for h1 to achieve your desired result. I just tried adding position: relative; and top: -450px;
.bg-image h1 {
display:inline-block;
font-size:48px;
font-family: "sofia-pro",sans-serif;
font-weight:900;
text-transform:uppercase;
color:#fff;
border-bottom:7px solid #fff;
padding-bottom:5px;
margin-top:4px;
-webkit-transform: rotate(-15deg) skew(-15deg, 0);
-moz-transform: rotate(-15deg) skew(-15deg, 0);
-ms-transform: rotate(-15deg) skew(-15deg, 0);
-o-transform: rotate(-15deg) skew(-15deg, 0);
transform: rotate(-15deg) skew(-15deg, 0);
text-transform: uppercase;
position: relative;
top: -450px;
}
.bg-image {
position: relative;
}
.bg-image img {
display: block;
width: 100%;
background-size:cover;
max-width: 2000px; /* corresponds to max height of 450px */
margin: 0 auto;
}
<div class="bg-image">
<img src="http://s27.postimg.org/h12ymqn9v/Web_Hdr_Bground_1.jpg">
<h1>Nobody</h1>
<br>
<h1>Ever Says</h1>
<br>
<h1>Seize</h1>
<br>
<h1 class="skewed">Tomorrow.</h1>
</div>

Answer 3

I am new to code and just saw this question. Have you tried the z-index? The z-index controls the z axis (up and down) of the webpage. Try putting z-index: -1 on css to make sure the picture will appear under the text on the webpage. Hope this helped!