How to Fake Background Opacity

The more observant among you will notice that the background of the website has changed recently. I love my butterflies but since I’ve been putting up a lot of pictures of art lately something had started to bug me.

The site is built with a simple centered container – I wanted the background of the website to show through but very faintly (at about 5-10% opacity). When you just have text this looks great, but as soon as you start to add photographs you start to run into problems – the background shows through the image – this is because the opacity effects everything within in.

For example if I have div id=”container” etc. with an opacity of 95% applied to it, all the child elements of thatdiv will also have opacity of 95%…There is however a CSS solution – a trick – you need to create two background images and position them very carefully.

Here are the detailed instructions and CSS.

 example 1 example 2 example3 example 4 example 5