How to Fake Background Opacity

Flipflops Tutorial, Web Things

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 thoughts to “How to Fake Background Opacity”

  1. 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. 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. 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. Hurrah, PHP errors! Just what I needed today. Must get this image uploader to work…

    I blame Xalibre though. It works fine locally ;)

Comments are closed.