How to fix website header text to header image

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><a href="#">About</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Blog</a></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><a href="#">About</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Blog</a></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>