How to Make Transparent Background Images

Here full code of how to add transparent background image, we can't add it using background opacity property because this property don't exist  but we can hack it by inserting a pseudo element with regular opacity the exact size of the element behind it.

div {
    width: 200px;
    height: 200px;
    display: block;
    position: relative;
}

div:after {
    content: "";
    background: url(http://subtlepatterns.com/patterns/bo_play_pattern.png);
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;   
}