Recently there has been a call-to-arms by Jen Simmons and others to “break out the box” of traditional web design by leveraging new technologies. One common contributor to the standard “boxes inside boxes” paradigm is the issue of images: if it’s not faces inside circles, pictures are almost always presented with straight edges in a rectangular grid; partly out of convenience, partly lack of imagination or knowledge by web designers, and partly because trying to distress image edges has usually meant a lot of work in PhotoShop. But by using blend modes, we can get fresh results with little effort required.

First, you need to find an appropriate image:

And then a distressed image border, with a solid center. There are many PhotoShop resources that provide such images:

Greyscale, tightly compressed 16 or 32-bit PNG images will tend to work best for this kind of border effect.

Background Images For Images

In principle, almost every HTML element can take a background-image, including image elements. Unfortunately, in this case, a background image is treated as being the same layer as the image to which it is applied, and won’t work for the purposes of blending. Instead, we’ll place the image inside a container with a background image of its own:

<div>
    <img src="citroën.jpg" alt="HDR Photograph of a battered silver Citroën 2CV">
</div>

The CSS:

div { 
    background-color: #fff;
    background-image: url(masque-24.png);
    background-size: cover;
    }
div img { width: 100%; }

Determining the correct blend mode can be a little tricky, and will change depending on the background color of the container. With a white background and the frame shown, the best option is screen:

div img { mix-blend-mode: screen; }

The result is what you see at the top of this article.

Alternative Approaches

Alternative possibilities exist, although they both exhibit drawbacks:

1. Webkit-derived browsers have image-mask, but it is non-standard and only works in Chrome and Safari.
2. border-image is well-supported across browsers, but is better suited to regular geometric border effects.

On the whole, I feel that this blend-mode technique offers the best opportunity for applying distressed edge effects easily and repeatedly to images: I look forward to seeing what you come up with!

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/Ejqxbg