How to Vertically center h1 text on its background image?

Asked Nov 30 '20 at 20:14

Active Nov 30 '20 at 20:17

Viewed 18 times

I need the h1 text to be in the middle of its background image vertically.

/* Header Container image */

.header {
  background-image: url("https://content.codecademy.com/courses/web-101/unit-6/htmlcss1-img_burgerphoto.jpeg");
  background-position: center;
  background-size: cover;
  height: 420px;
}


/* Header Itself */

.header h1 {
  background-color: rgba(5, 168, 170, 0.6);
  color: #FFF;
  max-width: 165px;
  margin: 0 auto;
}

<div class="header">
  <h1>BBQ BACON BURGER</h1>
</div>

edited Nov 30 '20 at 20:17

j08691

190,436
28
232
252

asked Nov 30 '20 at 20:14

mmirbekian

Use line-height:420px – Steve Tomlin Nov 30 '20 at 20:19
Use top: 50%; position: relative; transform: translateY(-50%); – Grazielle Carvalho Nov 30 '20 at 20:20
@SteveTomlin sorry that didn't work for me. Not sure why. It only heightens the background color of the text without vertically centering it. – mmirbekian Nov 30 '20 at 20:33
@GrazielleCarvalho Thank you ! That works ! – mmirbekian Nov 30 '20 at 20:34
@mmirbekian You're welcome ;D – Grazielle Carvalho Nov 30 '20 at 20:42

How to Vertically center h1 text on its background image?

0 Answers0