Making an Image Opaque with CSS

When I started my last design, I knew that I wanted to display the faux oil painting in the background as much as possible.  But what about the TEXT?!  I mean, let’s look at the colors on the page.

I’ve got dark green taking up the left, light blue in the middle and green again on the right.  I can’t use white text becaue it washes out in the center of the page.  And I can’t use dark text because it gets absorbed by the trees on the left.  I knew the answer was to make a gradient as the background for the content box – that would satisfy my two criteria:

1. Display the background
2. Make the text consistently visual

but I didn’t know how to do it.  On top of that, ya know, I’m always trying to be a little more professional with the way I code, and right now I’m on a kick to understand browswer compatibility.  For example, how to write the CSS so that it looks the same on Firefox, Safari AND IE.  That last one is rough sometimes.

So I had to do some research for figure out how to code in the opaque function.  Good thing there are great resources for it!

1. http://www.w3schools.com/Css/css_image_transparency.asp
2. http://www.cssplay.co.uk/opacity/

So here is an example of how to make a transparent portion of your site:

.page {
filter:alpha(opacity=90);
-khtml-opacity: 0.9;
-moz-opacity:0.9;
opacity: 0.9;
}

Now lets break it down.  Imagine you wanted the background of your posts to be partially transparent.  If you were using Thesis, that would correspond to the content_area.  So in your custom function you would write:

.custom #content_area .page {
Insert Your CSS
}

*Note: the page gets a period in front of it because it’s a class and not a div id.  I think of it like this: “Classes in high school were called periods.”  Everything else gets a # (except for lists, they don’t have anything in front, but don’t think about that right now).

Now for the different ways of setting opacity…

For Internet Explorer:

filter: alpha(opacity=90);

For Mozilla:

-moz-opacity: 0.9;

This is mostly for older browswers (anyone still use Netscape Navigator?)

For Safari (current):

opacity: 0.9;

This is the important one.  It is the current standard supported by Safari, Opera and Firefox

For Safari (old):

-khtml-opacity: 0.9;

This is for older versions of Safari, back before it adopted webkit (which is what you use for something like round borders).

FOUR lines of code?!

Yeah, it’s not elegant, but it’s not hard either.

Once again it’s just this:
.page {
filter:alpha(opacity=90);
-khtml-opacity: 0.9;
-moz-opacity:0.9;
opacity: 0.9;
}

And honestly you’ll probably get by just using:

filter:alpha(opacity=X);

and

opacity: X;

Of course you can change the 90 and 0.9 to whatever you want to make the image more transparent.  1.0 = no transparency.

Hope this has been a help and inspired some great new Thesis designs!

I’d love to know if you’ve designed anything like this using this tutorial or another.  Please let me know in the comments or hit up the Twitter below.

Tagged as: css