Adding a headline overtop of a hero image

Get Started
1

I have a hero image on my website and I’m trying to add a headline and button on top of it, centered and responsive so that the text gets smaller and resizes as the browser gets smaller.

thanks!

1080×328 30.2 KB

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>