Lately, I've been facing a challenge in my attempts to vertically center text while also incorporating a full-width background image. The goal is for the centered text to maintain its position regardless of the height of the enclosing container.
This is the code snippet I currently have:
HTML:
<header class="thank-you">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="thank-you-message">
<h1>Thank you</h1>
</div>
</div>
</div>
</div>
</header>
CSS:
.thank-you {
text-align: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background: #000000;
height: 500px;
}
.thank-you-message h1 {
color: #FFFFFF;
}