Hey guys. I have a div (block) text with a background color. I wanted to make this background color transparent, so I added some code to the div's CSS. The problem is, not only the background-color gets transparent, also the text within the div gets transparent (quite logical, yeah). What's the best way to fix this, so the background color gets transparent, but the text within stays 100% visible? CSS-code I used: #contentleft { width: 535px; height: auto; margin-right: 25px; float: left; background-color: #aa4432; margin-top: 30px; opacity: 0.25; filter: alpha(opacity=25); padding: 20px Code (markup): } HTML-code I used: <div id="contentleft"> <span class="titel_left">New website</span><span class="titel_right">24-8-2010</span><br /><br /> Finding a website that meets my requirements is hard. I've been doing a lot of designing in Photoshop lately, but I can't make anything I really like in particular. All designs I make aren't that bad, but they aren't amazing either.<br /><br /> Anyway, I've decided to stop messing around with Photoshop, pick one design, and turn it into a website. And voila, here it is. I've decided not to use a CMS, but code everything myself. The reason for this is because options regarding the design are limited when using a CMS, but are unlimited when coding everything myself.<br /><br /> Oh well, if you have any suggestions or comments about the layout, please don't hesitate to contact me.<br /> </div> Code (markup): Link to the problem: http://www.jonathanofzo.com/ Thanks in advance.
Two possible ways to solve this problem: 1. Two divs, one inside the other. The first semi transparent for the background effect, the second with no background at all but without a filter too. 2. Use a small png graphic for the transparency effect.
Ah, the .PNG is a perfect solution. I regret myself for not thinking of that simple solution. Thanks!