Transparent background images

by Barney Carroll

HTML

<div class="ima">
    <div class="txt">
        This doesn't have opacity. Neither does its parent.
    </div>
    <div class="ima__transparency"></div>
</div>

CSS

.ima {
    position: relative;
}

.ima__transparency {
    background: url(http://www.lorempixel.com/640/480/abstract);
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: .5;
}

.txt {
    position: relative;
    z-index: 1;
}