How to fix website header text to header image - html

Question

I am having trouble fixing/anchoring some slogan text to a website header. I get it to the position i want but when the page is resized the text is no longer in the position i want it. Can this be done in html and css or does the text have to be put onto the actual image?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #fff;
color: #555;
font-family: 'Lato', 'Arial'. 'sans-serif';
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
.row {
max-width: 1140px;
margin: 0 auto;
}
header {
background-image: url(img/view3.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.header-text-box {
position: absolute;
width: 1140px;
top: 50%;
left: 30%;
color: white;
}
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400" rel="stylesheet">
<nav>
<div class="row">
<a href="index.html">
<img src="https://static1.squarespace.com/static/524263b4e4b0adb01903b572/t/575edefe86db433ce0efcf9b/1465835270342/" alt="developer logo" class="avatar">
</a>
<ul class="main-nav">
<li>About</li>
<li>Projects</li>
<li>Blog</li>
</ul>
</div>
</nav>
<div class="header-text-box">
<h1>The header text i</h1>
<p>want goes here.</p>
</div>
Would this solution be considered bad practice?
header {
background-image: url(img/test.jpg);
height: 100vh;
background-size: cover;
background-position: center;
width: 100vw;
}
.header-text-box {
position: absolute;
width: 1140px;
top: 50vh;
left: 30vw;
color: white;
}

Answer 1

Try using vh and vw for your positioning. % is a bit funky especially with height.
.header-text-box {
top: 50vh;
left: 30vw;
}
Also be sure to set
header {
position: relative;
}
so the .header-text-box will follow the header tag instead of the body tag

Answer 2

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #fff;
color: #555;
font-family: 'Lato', 'Arial'. 'sans-serif';
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
.row {
max-width: 1140px;
margin: 0 auto;
}
header {
background-image: url(https://static1.squarespace.com/static/524263b4e4b0adb01903b572/t/575edefe86db433ce0efcf9b/1465835270342/);
height: 100vh;
background-size: cover;
background-position: center;
display: flex; /* this is the magic css */
justify-content:center; /* this is the magic css */
align-items:center; /* this is the magic css */
}
.header-text-box {
color: white;
}
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400" rel="stylesheet">
<nav>
<div class="row">
<header>
<div class="header-text-box">
<h1>The header text i</h1>
<p>want goes here.</p>
</div>
</header>
<ul class="main-nav">
<li>About</li>
<li>Projects</li>
<li>Blog</li>
</ul>
</div>
</nav>
Not sure if this is what you are going for. But I am assuming you want the header text centered in the header image. I try to avoid absolute position as it tends to be messy.
for this type of stuff I like to use flex
here is a fun way to master flex: http://flexboxfroggy.com/

Answer 3

flexbox w background image and vmin
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #fff;
color: white;
}
header {
background-image: url(https://static1.squarespace.com/static/524263b4e4b0adb01903b572/t/575edefe86db433ce0efcf9b/1465835270342);
height: 100vh;
background-size: cover;
background-position: center;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-content: center;
align-items: center;
}
header > h1 {
font-size: 12vmin;
flex: 0 1 auto;
align-self: auto;
}
header > p {
font-size: 6vmin;
flex: 0 1 auto;
align-self: auto;
}
<header>
<h1>The header text</h1>
<p>subtext this is subtext</p>
</header>