Monday, March 10, 2014; 11:38:16 AM Eastern
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.
- #### 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.