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.


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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s