<div class="parent">
  <h1>Hello World!</h1>
</div>


<style>
.parent {
    //(required), to let child elements be within bounds.
    position: relative; 

    // (optional)
    background: #5C97FF; 
}

.parent h1 {
    padding: 50px;
    // (required), or this child element will position wrongly
    position: relative;
    // (required) If parent background is not set and the z-index of :before is -1, since default z-index is 1, you don't need to set this value. 
    // But if you set the parent background, then you need to specify this
    z-index: 2;
}

/* You could use :after - it doesn't really matter */
.parent::before {
    // (required) for pseudo element, or it will not be shown.
    content: '';  
    background-image: url('https://assets.digitalocean.com/labs/images/community_bg.png');
    background-size: cover;
    // (required) to postion this element overlay the parent element
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    // (required)
    z-index: 1;
    opacity: 0.6;
}
</style>