concept texture in category css

This is an excerpt from Manning's book CSS in Depth. Login to get full access to this book.

11.3.3. Adding texture to an image

Another application of blend modes is to add texture to an image. You may have a clear, modern image, but sometimes you want it to appear differently for stylistic reasons. You can use a grayscale image to artificially add film grain or some other texture to the image.

Consider the image shown in figure 11.15. This is the same bear image from earlier, but it has been blended with a textured image to give it the appearance of a rough-hewn canvas. This sort of effect can be achieved with one of the contrast blend modes: overlay, hard-light, or soft-light. In this case, I didn’t want to alter the hue of the image, so I used a grayscale image to supply the texture. This way the coloring of the original still shows through.

Figure 11.15. Image with texture blended in

Listing 11.15. Using hard-light to add texture to the image

.blend { min-height: 400px; background-image: url("images/scratches.png"), url("images/bear.jpg"); 1 background-size: 200px, cover; 2 background-repeat: repeat, no-repeat; 2 background-position: center center; background-blend-mode: soft-light; 3 }

copy

I’ve found that soft-light tends to work better with darker texture images, while hard-light and overlay are better suited for lighter texture images. (This tendency is reversed when the texture is behind the primary image.) Your results may vary, though, depending on your design’s need and darkness of the base image.