How to put text behind an image in CSS?

I am new to CSS and I want to put text "MOUNTAINS" behind the mountain in the background image. Like the below image.

Home section image

This is the existing code

HTML Code Part

<!-- Home -->
        <section id="home" class="col-md-12">
            <!-- Background Image -->
            <div id="home-img" class="col-md-12">

            </div>
            <!-- Home Content -->
            <div id="home-content">
                <h1 id="first-title">LOSANGELES</h1>
                <h1 id="second-title">MOUNTAINS</h1>
            </div>
        </section>

CSS Code Part

#home{    
    height: 100%;
    position: relative;
    padding: 0;
}

#home-img{
    background: url("../img/home/1.jpg");
    background-size: cover;       
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
}

#home-content{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);    
    letter-spacing: 1px;
    line-height: 124px;
    color: #4d4d4d;
    font-family: 'Bebas Neue', cursive;
}

#home-content #first-title{
    color: rgb(77, 77, 77);
}

#home-content #second-title{
    color: rgb(65, 79, 107);
}

#home-content h1{
    font-size: 115px;
    margin-left: -25%;
    margin-top: -8%;
}

I am stuck with this. So can CSS expert help me to do this? Thank you