This is a follow-up to last week's CSS design question.

I wanted the ability to put a background image on any of the sections of the page.

I naively assumed that there would be an opacity property on the background image, but it turns out that's not so.

I did some research, got in touch with Nicolas Gallagher, who's been very helpful with CSS questions in the past, and arrived at an easy solution.

Demo...

Here's a page that demonstrates.

Question...

I want the text to "pop" better. This isn't readable enough.

I've thought about giving an opacity to the text, and increasing the show-through of the background image. But I wanted to put this out as a mini-design challenge, in case some of the readers have an idea how it might work.

Thanks in advance for any suggestions.

Update

Here's the second version of the demo.

Thanks for all the great feedback, esp from Alec Perkins.

I took the opacity off the background, added a new div containing just the text, and gave it a white background with an opacity of .85. Added a little padding, and a border.

I tried it with a drop shadow on the border, and rounded corners, but I prefer this look.