How to make your backgrounds transparent using CSS

May 7, 2007   Tips & Tools, Wordpress Themes 

Phil Nash is a genius. His trick for making backgrounds transparent while still allowing the other items stacked on top in the div to keep their opacity put the icing on the cake in my first theme for WordPress. Here’s the code

code
I originally had it in a class, and that didn’t work in Firefox. Once I moved it to a div, it worked except it needed the conditional statement around the bit for IE for it to work in Firefox. (Phil did some more tweaking for me and the class worked fine. I changed the code above to reflect.) Take a look at the theme now. I think it’s a nice touch that makes the whole thing more interesting.

So… the white space on the right side is bothersome to some, it seems. I’m going to work on a variation of the background to include with the theme. Thanks for all the input, I really appreciate the time you’ve taken to leave comments- keep it coming today. I’ll probably release the theme tomorrow.

[Post to Twitter]  [Post to Delicious]  [Post to Digg]  [Post to StumbleUpon] 

You might also enjoy:

7 Responses

  1. Court says:
    May 7, 2007 at 12:17 pm

    Now that is a genius little trick, I had no idea that you could do that! I guess I’ll just have to keep checking back with you so that I don’t miss any other tricks in the future!

  2. Phil says:
    May 7, 2007 at 1:18 pm

    Hmm… I really don’t know about genius! Thanks for the link though and I’m so happy I could help out with a beautiful theme like this!

    Good luck with it!

  3. Daniel Sitter says:
    May 7, 2007 at 8:27 pm

    I have familiarity with TypePad and find it quite capable and easily modified.

    I am also designing a new technology blog with Wordpress, finding it quite a bit more archaic and difficult to create my blog from scratch. Your tips here look to be wonderful!

    Thank you!

  4. Chris says:
    May 7, 2007 at 11:36 pm

    Very slick.

    The transparency effect works very well with the left pattern. I dig it.

    And the whitespace on the right doesn’t bug me much. If I were to use this theme, I’d have that sidebar packed so densely… what whitespace?!?

  5. Daniel M. Clark says:
    May 10, 2007 at 9:55 am

    I’m on a Mac so I don’t know – does IE7 fix the problem with IE where transparent PNG’s are rendered as gray? This CSS trick doesn’t address that, as Randa’s pointed out with her theme.

  6. Randa says:
    May 10, 2007 at 10:07 am

    @Daniel- This renders correctly in IE because of the 2nd and 3rd sections of the CSS. They are there specifically for IE.

  7. Utah SEO says:
    June 3, 2007 at 3:46 am

    Nice little trick. Thanks for sharing.