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

5 Comments

  1. Darfuria says:

    Man, you’ve been too busy. I want some more interesting blog posts ;)

    A taster of some crazy stuff you’ve been doing with Wordpress, or some new artwork you’ve been doing.

    Anything!

  2. john says:

    Well, my plugin will be ready soon – and I have just finnished a gorgeous lump of sculpture.

    Perhaps I’ll do a bit of writing over the festive period…

  3. Darfuria says:

    Yay for image gallery. I’m finishing mine up, and still getting some PHP errors. Argh!

    That’s funny. The server time seems to be wrong.

  4. Darfuria says:

    Hurrah, PHP errors! Just what I needed today. Must get this image uploader to work…

    I blame Xalibre though. It works fine locally ;)

  5. Darfuria says:

    Booya! Did some CHMODing and that fixed it. Yay!

Leave a Reply