I am trying to use css to have a background image with opaque attributes while still having the text to show on top of the image come through normally (no opaque attributes).
I’ve tried placing a right after the div id =”page” section but then it just pushes the text down below the image. Any suggestions on how to fix this in a way that works for most browsers?
<div id="page" style=" height: 200px; background-image:url('background.jpg'); filter:alpha(opacity=30); -moz-opacity:0.3; -khtml-opacity: 0.3; opacity: 0.3; ">
<div class="home primary_page" id="layout">
<div id="page_content" style>
<div class="lead_copy">
<label for="line1" style=" color: #00A4E4; line-height: 40px; font-size: 33px; margin-left: 30px; font-family: font-family: rooney-web-1; ">Buy the stuff you want from the stores you know, cheaper.</label><br>
<label for="line2" style=" color: #00A4E4; line-height: 60px; font-size: 23px; margin-left: 80px; font-family: font-family: Verdana; ">We source deals for you so you don't have to deal with it.</label><br>
<label for="line3" style=" color: #00A4E4; line-height: 40px; font-size: 28px; margin-left: 25px; font-family: font-family: Verdana; ">Don't see the product you want? Let us know and we'll get it.</label><br><br>
<FORM METHOD="LINK" ACTION="/catalog.php">
<INPUT TYPE="submit" VALUE="Get Started">
</FORM>
</div>
</div>
</div>
</div>
Opaque means 100% opacity and you can’t see through it. Seems like actually want a transparent image, not an opaque one.
Easiest solution is to save your image as a png and set it to 30% opacity. You’re already using an image. CSS opacity is really handy for elements which are live. Images can simply be adjusted by altering the actual image – especially background images.
If you REALLY want to use an opaque image with text on top of it. You’ll need to position the divs absolutely so you can stack them via z-index.