Transparent Background Images

Last updated on: August 5, 2012

There is no CSS property background-opacity, but you can fake 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;   
}

​

Reference URL