Preventing raised div from moving based on screen width - html

Question

I want to keep a div from moving up on mobile devices with smaller widths. I realize I could do it with media queries but I feel there is likely a cleaner way.
.wrapper {
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top: 23%;
overflow: hidden;
text-align: center;
}
#titlebackground {
background: rgba(0, 0, 0, .5);
}
#title {
font-family: Consolas, monaco, monospace;
text-align: center;
font-size: 5em;
font-weight: 900;
color: #fff;
display: inline-block;
}
#titlelocation {
position: relative;
top: -50px;
}
<header>
<div class="wrapper">
<div id="titlelocation">
<div id="titlebackground">
<span id="title">My Title</span>
</div>
</div>
</div>
</header>
How do I raise the title so that it is higher than the center of the div, but prevent it from moving up even higher on lower resolutions?
Edit: to reproduce: run code snipped on full screen and then change screen width.. The div moves up the smaller the screen goes.

Answer 1

Your .wrapper has a percentage padding padding-top: 23%, so at mobile that is gonna be alot less than at desktop you can put a fixed px padding so it's the same across all devices.
.wrapper{
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top: 100px;
overflow:hidden;
text-align: center;
}

Answer 2

You can use css vh instead of percentage and then give your desire value to it. vhis measured regarding to the height of device.
.wrapper {
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top: 65vh;
overflow: hidden;
text-align: center;
}
#titlebackground {
background: rgba(0, 0, 0, .5);
}
#title {
font-family: Consolas, monaco, monospace;
text-align: center;
font-size: 5em;
font-weight: 900;
color: #fff;
display: inline-block;
}
#titlelocation {
position: relative;
top: -50px;
}
<header>
<div class="wrapper">
<div id="titlelocation">
<div id="titlebackground">
<span id="title">My Title</span>
</div>
</div>
</div>
</header>

Answer 3

Use absolute positioning. It's exactly what you're looking for:
.wrapper{
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow:hidden;
text-align: center;
}
#titlebackground {
background: rgba(0 , 0 , 0 , .5);
}
#title {
font-family: Consolas, monaco, monospace;
text-align: center;
font-size: 5em;
font-weight: 900;
color: #fff;
display: inline-block;
}
#titlelocation {
position: absolute;
bottom: 65%;
width:100%;
}
<header>
<div class="wrapper">
<div id="titlelocation">
<div id="titlebackground">
<span id="title">My Title</span>
</div>
</div>
</div>
</header>
EDIT: Using vh as units for the padding is also possible, but won't work in all browsers, specially the old ones.