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.

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.

Update

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.

Advertisements

About Dave Winer

Dave Winer, 54, pioneered the development of weblogs, syndication (RSS), podcasting, outlining, and web content management software; former contributing editor at Wired Magazine, research fellow at Harvard Law School, entrepreneur, and investor in web media companies. A native New Yorker, he received a Master's in Computer Science from the University of Wisconsin, a Bachelor's in Mathematics from Tulane University and currently lives in Berkeley, California.
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s