I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Bug Crazy

A Quick and Simple CSS-Only Method For Fading Background Images

css / backgrounds

Estimated reading time: 1 minute, 6 seconds

There’s no background-opacity control in yet, but there’s an easy way to fake it, by using multiple background images. The trick is to manipulate the fact that the background-image property will also take a CSS color… which includes rgba.

A “washed out” background can be used to enhance the contrast between text and the image behind it. Naturally, you can reduce the opacity of the image by processing it in , but that usually takes repeated back-and-forth experimentation between the browser and graphics application, whereas writing the visual changes in CSS is far more direct and efficient.

Background image, before layering

The order of backgrounds in a multiple background declaration is from front to back, so we specify the composite photograph (from work by Thomas Shahan) last in the banner for the fictional entomologist blog Bug Crazy:

h1 { font-family: Calluna Sans, Arial, sans-serif; color: #fff;
background: -webkit-linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url('bugs.jpg');
background: -moz-linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url('bugs.jpg');
background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url('bugs.jpg');
font-size: 5rem; padding: 2rem; text-align: center; background-repeat: no-repeat; background-size: cover; word-spacing: 5rem; margin-top: 0; }
<h1>Bug Crazy</h1>

That produces the result you see at the top of the page; changing the “darkness” of the background image is simply a matter of raising the last value (alpha) in the rgba color value for the background image layer.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.