the text is on image - example

the text is on image - example

//HTML 
<div class="container-fluid">
        <div class="row">
            <div class="col-12 mb-3">
                <div class="position-relative">
                    <div class="c-header-container-overlay">
                        <div class="c-content">
                            <img class="c-content-image img-fluid" src="images/header-img.jpg" >
                            <div class="c-content-details c-fadeIn-top">
                                <p class="c-content-text">SIGN IN  /  REGISTER</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>

//CSS
//Header-page overlay
.c-header-container-overlay{
  width: 100%;
  .c-content {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin: auto;
    overflow: hidden;
  }
  .c-content-details {
    position: absolute;
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
    width: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  .c-content-text{
    @include the-font(GalaxiePolaris-Bold,21px,#fff);
    letter-spacing: 2px;
  }
}