body{ background-image: url('http://i2.minus.com/iEWiD93Z1gZze.jpg'); background-position:-400px 0; background-repeat: no-repeat; font-family:verdana; color:white; } p{ font-size:12px; padding: 10px; } .blackBG{ background-color: #000; } .parent{ position:relative; width: 300px; height:30px; } .semi_transparent_bg{ position: absolute; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); opacity: 0.3; background-color: #fff; width: 300px; height:30px; border-radius:3px; z-index:1; } .child_content{ position:absolute; width: 300px; height:30px; z-index:2; } .child_content h2{ font:bold 24px/30px Arial, Sans-serif; padding:0; margin:0; color:black; text-align: center; } /**** reusable classes ****/ .st_div_container{ position:relative; width: 100%; } .st_bg{ position: absolute; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); opacity: 0.3; width: 100%; border-radius:3px; z-index:1; } .st_content{ position:absolute; width: 100%; z-index:2; }
<body> <div class="parent"> <div class="semi_transparent_bg"> </div> <div class="child_content"> <h2>My awesome page title</h2> </div> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque animi assumenda explicabo labore quidem odio repudiandae distinctio consequuntur quas libero temporibus delectus rem provident autem magnam recusandae vero aut fugit.</p> <div class="st_div_container"> <div class="st_content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque animi assumenda explicabo labore quidem odio repudiandae distinctio consequuntur quas libero temporibus delectus rem provident autem magnam recusandae vero aut fugit.</p> </div> </div> </body>