demosthenes.info

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 projects

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.

Bugs
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.