Opacity in CSS background images

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.


Here's a page that demonstrates.


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

A picture named notReadableEnough.gif

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.


Here's the second version of the demo.

A picture named demo2.gif

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.

Last built: Wed, Jul 9, 2014 at 11:23 AM

By Dave Winer, Monday, March 10, 2014 at 11:38 AM. Shut up and eat your vegetables.