I’ve just redesigned this blog (come on, it could be worse), and I wanted the title to sit in a box on top of the image, and for the image to show through the background of the box; thus:

I did this using css positioning:

1. I put the image in a div, and absolutely positioned the div at the top of the page;
2. I then created two identical versions of the title box, and absolutely positioned one over the top of the other:
3. the top one (title) has the text, with no opacity set;
4. the bottom one (titleBox) has a background colour with the opacity set to a degree of transparency; the text is also in this div, to ensure the box size matches that of the upper div. The text is hidden behind that of the upper div.

However, what if I also wanted to add another div below these? At the moment it would have to be positioned absolutely, meaning that any resizing of the text could upset the flow of the document. My solution was:

1. Put both divs into one new div (topRight);
2. Div titleBox comes first (though I guess it doesn’t matter if you add a z-index), with the default relative positioning;
3. Div title come next, positioned absolutely at the top (ie of div topRight).

Now any new content will flow as expected, relative to the div titleBox.

Here’s the css (trimmed down for the sake of clarity):

• #topRight {
• position:absolute;
• top:30px;
• right:0;
• }

• #title, #titleBox {
• margin:0;
• padding:10px;
• }

• #titleBox {
• opacity:0.2;
• color:#fff;
• }

• #title {
• background:none;
• z-index:1;
• position:absolute;
• top:0;
• }

Opacity appears to be supported by most browsers now (with the usual notable exception of Internet Explorer), though I haven’t tested extensively. I have also since added rounded corners, but these are only visible in Firefox and Safari (using proprietary tags, while the rest of the browsers catch up).

Update (March 2009)

There is now growing support for RGBa, which enables the addition of alpha transparency to a colour. Whereas opacity applies to all contents of an element, RGBa can apply just to the background and not the text.

So far browsers support the following, which would give a paragraph a red background:

• p {
• background-color: rgb(255, 0, 0);
• }

With opacity the paragraph’s background would be transparent but so would the text it contains:

• p {
• background-color: rgb(255, 0, 0);
• opacity: 0.5;
• }

(Note: Internet Explorer would require filter: alpha(opacity=50).)

With rgba we can give the paragraph a 50% transparent background, leaving the text unaltered and allowing anything behind to show through:

• p {
• background-color: rgba(255, 0, 0, 0.5);
• }

You can also see where I’ve begun playing with rgba.

• Possibly related posts

  1. Playing with CSS (IE7 fails, of course)
  2. CSS ‘sliding doors’: positioning the tabs
  3. Scratching my head over Rails