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:
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:
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!