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;
}
Try using vh and vw for your positioning. % is a bit funky especially with height.
Also be sure to set
so the .header-text-box will follow the header tag instead of the body tag