Non-transparent Content over Transparent Background

A popular look in web is to put a content container over top of a texture or image. Then fade out the content container's background to allow some of the texture or image to show through. You'll want to use the opacity style to pull this off, but you'll find that the opacity applies to the content as well. So you end up with partially transparent text, on a partially transparent background, on top of a texture or image.

To fix this, you'll need to have break the background, and content into two separate containers, and then stack the content ON TOP OF the transparent background.

 

 

.transBG-white {
    border-radius: 5px 5px 5px 5px;
  background-color: #FFFFFF;
  height: 100%;
  opacity: 0.75;
  position: absolute;
  width: 100%;
  z-index: 0;
}
.nonTransContent{
    padding: 10px 0 0 46px;
    position: relative;
    z-index: 1;
}