How to make transparent background image

There is no have any background transparent css property, but you can do transparent background image with css trick, here have way using regular opacity and do transparent background image

Demo

HTML

<div class="background-transparent">
    <h2>Transparent background image</h2>
</div>

CSS

<style>
    .background-transparent {
        width: 100%;
        height: 250px;
        display: block;
        position: relative;
    }
    .background-transparent::after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: -1px;
        opacity: 0.5;
        background: url(img/test.jpg) no-repeat center center;
        background-size: cover;
    }
    .background-transparent h2 {
        text-align: center;
        font-size: 25px;
        line-height: 50px;
        font-weight: bold;
        color: #FFF;
        position: relative;
        z-index: 1;
        text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    } 
</style>