Opacity for Backgrounds with CSS 2

One problem that I can across recently while designing a website for a client was trying to make the background opaque without making all of it’s contents, or “children” opaque as well.  I was pulling my hair out, scouring the internet trying to find a solution that did not use CSS 3 but CSS 2, because I wanted it to be very compatible with any browser.  I tried a whole bunch of things and finally came up with a solution that worked – so I thought I’d share it as a resource for others who have had the same problem!

This is an example image of how the site was looking:

 Opacity using CSS to div

Obviously very washed out.  The images looked pale and boring, and the text really didn’t stand out – my client was not happy with that!  So what I did allowed the site to look as I had intended:

Opacity using CSS 1px x 1px background image

One of the big challenges that I had was that there were a lot of background images in a whole bunch of different div’s already, and of course with CSS 2 you can only have one background image per div, so I had a limited selection of places to work with.  What I ended up doing was making a 1 pixel x 1pixel image that was the colour and opacity that I wanted, saved it as a png-24 because I wanted to ensure that it kept the transparency I desired (png-8 or gif only allow pixels to be fully transparent or full colour, no partials!), and then set it as a repeating background in the div I wanted to have the opaque background – and voila!  It worked!  My other previous ideas either had the background not lining up at times (especially for a very small window) or would not extend consistently when the box re-sized – but this attaches itself to the entire div no matter how small, large, etc it is.

Anyhow, an “ah-ha!” moment that I thought I would share because I couldn’t find it listed anywhere as an idea to try!  If you use this idea feel free to let me know, I’d love to know my idea worked for others as well!

Tags: , , , ,

This entry was posted by Anna Kouwenberg on Tuesday, July 12th, 2011 at 11:08 am and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed.