Hi Guys

I have not been on for a while

Test site here www.mechanic-aid.com/

Trying to get the background of the above site to show through the container. How can I get the f2f2f2 containers to be a little transparent so the wallpaper shows through just a little?

Loving the new Element template 5 Stars

Thanks for looking

There are 2 ways to go about it:

The PNG Method
1. Create a new 1x1px image
2. Fill it with #f2f2f2
3. Lower the opacity of the layer to about 70-80%.
4. Save it as a transparent PNG-24.
5. Use CSS to set the background to the transparent PNG:
The CSS Method
Add these CSS properties to the background for each row you want to be transparent. Example:

Hi Thanks for your help I added that line to my containerBG but has taken removed all the f2f2f2...

have I done something wrong?

.mainRow .containerBG {background: #f2f2f2, -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
filter: alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;}

Ah sorted I mixed up my : and ;

ALSO

trouble is makes text faded too?

Sounds like you may need to then specify the opacity of the text:

eg mainRow .containerBG p {opacity info here}

Anthony

Yeah I try to avoid using opacity on such a broad scale and prefer the PNG method for most cases. However, if this isn't an option, what Anthony suggested should work too... just modify the opacity of the items within that container. Otherwise, they will inherit the opacity of the container.

Yep I agree whole heartedly. I much prefer images rather than resorting to filters for ie which can have a detrimental speed and therefore ranking effect - or so I have read.

Anthony