HTML: How do I exclude text color from an opaque div?

S

Siverlo

New member
I'm trying to use a specific background for my thursday blog posts. Making a div class, inserting the background image, and making it opaque was easy enough. The problem I'm having is that it's difficult to read the text, because my css settings make everything opaque. Is there a way to specify that I only want the image to be opaque 40%?

.thursday {
background:url(mytileableimageaddress.jpg) repeat;
opacity:0.4;
filter:alpha(opacity=40);
color: black
}

I also did "color: #000000", not that it made a difference. I have to give a tremendous thank you to the Yahoo! Answers community for helping me out.

P.S. If it matters I now blog with blogger/blogspot.
 
Back to basics. Why do you need the background image to be semi-transparent? Can you achieve the required result by other means such as knocking down the blacks and midtones in an image editing software? (Remember not all browsers support this and in some browsers the image will not appear as you intend).
If this is the only way to achieve your desired effect, I suggest this structure in your html:
<div id="container">
<div id="thepicture"></div>
<div id="the_stuff_you_want_opaque">
<p>Text etc</p>
</div>
</div>
CSS:
#container{
position:relative
}
#thepicture{
height:pic height;
width:pic width;
background:url(mytileableimageaddress.jp… repeat;
opacity:0.4;
filter:alpha(opacity=40);
}
#the_stuff_you_want_opaque
{
position:absolute;
top:you decide;
left:you decide;
width:your picture width less the value in left(x2)
}
 
Back to basics. Why do you need the background image to be semi-transparent? Can you achieve the required result by other means such as knocking down the blacks and midtones in an image editing software? (Remember not all browsers support this and in some browsers the image will not appear as you intend).
If this is the only way to achieve your desired effect, I suggest this structure in your html:
<div id="container">
<div id="thepicture"></div>
<div id="the_stuff_you_want_opaque">
<p>Text etc</p>
</div>
</div>
CSS:
#container{
position:relative
}
#thepicture{
height:pic height;
width:pic width;
background:url(mytileableimageaddress.jp… repeat;
opacity:0.4;
filter:alpha(opacity=40);
}
#the_stuff_you_want_opaque
{
position:absolute;
top:you decide;
left:you decide;
width:your picture width less the value in left(x2)
}
 
Back
Top