Forums
View unanswered posts | View active topics It is currently Thu Jul 31, 2014 7:42 pm



Reply to topic  [ 5 posts ] 
 Putting RGBA opacity on top of a background image 
Author Message

Joined: Mon Oct 03, 2011 8:00 am
Posts: 5
Post 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.


Thu Oct 06, 2011 5:58 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Putting RGBA opacity on top of a background image
This sounds like perhaps a consequence of hasLayout: http://css3pie.com/documentation/known- ... #hasLayout

Does it line up correctly when you remove the margin-top:110px ?


Thu Oct 06, 2011 8:19 am
Profile

Joined: Mon Oct 03, 2011 8:00 am
Posts: 5
Post Re: Putting RGBA opacity on top of a background image
If I take out margin-top:110px; then the div and text (which I'd like to have the semi transparent background on) goes to the top of the containing div on all browsers.

With behavior: url(/css3pie/PIE.htc); in .boxDescription then in IE7 it seems to ignore the margin-top:110px; and go to the top. In IE8 it stays where it should be. Both don't have the semi transparent background.

If I remove behavior: url(/css3pie/PIE.htc); from .boxDescription, IE7 and IE8 show the .boxDescription text where it should be. In IE7 there is no semi transparent background and in IE8 it shows the solid black background colour (which I could live with).

I've tried adding the behavoir to different elements, as was suggested for a previous issue, however I've not got it to work yet.

Any other suggestions gratefully received.


Thu Oct 06, 2011 11:39 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Putting RGBA opacity on top of a background image
The disappearing background is likely common issue http://css3pie.com/documentation/known-issues/#z-index

The misalignment definitely sounds like a hasLayout issue. You can find other topics in this forum around this, but basically IE<8 will remove top margins from elements with hasLayout, if there is an absolute-positioned previous sibling. Since PIE adds such a previous sibling, boom your margin goes away.

There are different ways to get around this (use padding on a parent rather than top margin, etc.) but the bottom line is this is an IE bug that you'll have to work around. PIE isn't the cause, just the trigger.


Thu Oct 06, 2011 2:52 pm
Profile

Joined: Mon Oct 03, 2011 8:00 am
Posts: 5
Post Re: Putting RGBA opacity on top of a background image
All fixed. Many thnaks for your help in working out what was going on.

My apologies for some of the problem being related to one of the common issues. I had read them, but just didn't click that this issue was connected.

Adding position:relative to .boxDescription got the semi transparent background back and I removed the margin-top:110px; from .boxDescription and added a new surrounding div with the class padding-top:110px;.


Fri Oct 07, 2011 4:27 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 5 posts ] 

Who is online

Users browsing this forum: Bing [Bot], Exabot [Bot], Google [Bot] and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.