Putting RGBA opacity on top of a background image
I have a background image in a div which I then have another div on top of with a RGBA opacity and text on top of that. Working in Firefox, Chrome, etc.
Can't get it to work in IE7 and IE8 though. In fact the text is shown at the top of the printingBox div instead of the bottom. Here's the code:
Code:
<div class="printingBox officeProductsBG">
<a href="office-products"><div class="boxDescription">
<h2>Office Products</h2>
<p>Everything you need for a busy<br />office at compatative prices. </p>
<!-- end .boxDescription --></div></a>
<!-- end .printingBox --></div>
Code:
.printingBox {
width: 290px;
height: 170px;
float:left;
margin-left: 20px;
margin-bottom: 20px;
border: #fff solid 1px;
}
.printingBox a {
outline-style: none; /* removes dotted outline around links */
text-decoration: none;
}
.printingBox a:link {
color: #72a200;
}
.printingBox a:visited {
color: #72a200;
}
.printingBox a:hover, a:active, a:focus {
color: #fff;
}
.officeProductsBG {
background-image: url(../images/office_products.jpg);
}
.boxDescription {
text-align:center;
font-family: omnes-pro, sans-serif;
margin-top: 110px;
padding: 0px 10px;
height: 60px;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.7);
-pie-background: rgba(0,0,0,0.7);
behavior: url(/css3pie/PIE.htc);
}
.boxDescription p {
color: #fff;
font-size: 0.9em;
margin-top: -20px;
line-height: 1em;
}
Any solutions very much appreciated.
Forums
