Adding a headline overtop of a hero image

Get Started
2

You could play around with something like this and some fallbacks for browsers that don’t support viewport based font-sizing. Below are some links about viewport based font-sizing as well. You might be better off with some breakpoints to avoid the text from getting to small or large though rather than that technique. Typically it is safe once you reach “mobile” width to just snap to 1em rather than dealing with viewport based sizing.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  

<style type="text/css">

.page-container {
  max-width: 690px;
  margin: 0 auto;
}

.hero {
  display: block;
  width: 100%;
  height: 0;
  padding: 30% 0 0 0;
  position: relative;
  overflow: hidden;
}

.hero img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  max-height: 100%;
  max-width: 100%;
}

.hero .text-wrap {
  width: 100%;
  position: absolute;
  bottom: 0;
  text-align: center;
}

.hero .text-wrap h2 {
  font-family: sans-serif;
  color: white;
  font-size: 2vw;
}

.hero .text-wrap a {
  display: inline-block;
  padding: .5em 1em;
  border: 1px solid black;
  font-size: 1.5vw;
}

</style>
  
</head>
<body>

<div class="page-container">
  <div class="hero">
    <img src="hero.jpg">
    <div class="text-wrap">
      <h2>Headline really really long headline</h2>
      <a href="#">Button Text</a>
    </div>
  </div>
</div>

</body>
</html>