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


Transparent background image


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


    .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);
  • Share
  • Copyright 2016 by All Rights Reserved.