The answers to CSS: set background image with opacity? describe a great background opacity fix using the pseudo element :after. However, if a parent division has a background color the transparent background image no longer shows, due to its use of z-index: -1. I've tried numerous work-arounds using this basic model to no avail.
Here is sample code. Note that without .locations_30 {background:white} it works great.
body { background-color: #fefbed; color: #444; font-family: Helvetica, sans-serif; font-size: 16px; } .locations_20 { position: relative; } .locations_20:after { content: ""; width: 100%; height: 100%; display: block; position: absolute; z-index: -1; background-image: url(../background_images/zenrockgarden_mod.jpg); background-repeat: no-repeat; left: 0%; top: 0%; background-size: 100% 100%; opacity: 0.27; } .locations_30 { background: white; width: 800px; padding: 75px; } /*parent division with color will overrun z-index: -1*/<body> <div class="locations_40"> <div class="locations_30"> <p class="locations_20"> Super Sale Event We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> </p> </div> </div> </body>
