How do I go about making the text in a module not affected by the opacity for the white background.

For example on this page.


In this page I would like the text and 3 images to not be affected by the opacity only the white background.

3 Answers 3


In your template.css replace:

.servpricing {
background: #FFF;
color: #000;
opacity: 0.3;
filter: alpha(opacity=20);


.servpricing {
background: #fff; // Left as a fallback for older browsers
background: rgba(255,255,255,.3); // transparent white
color: #000;

you can use this css for transparent backgrounds only

background: rgba(255, 255, 255, 0.7);


To have a white background only with an opacity, use the following:

background: rgba(255, 255, 255, 0.3);
background: url(../images/transparent_white.png) repeat;

255, 255, 255 are the rgb values for white and 0.3 is the level of transparency. I've also included a fallback image for older browsers that do not support rgba. If you want to keep it, you will of course have to create the transparent png and possibly the path of it.

Hope this helps

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.