How to Create Image Overlays with CSS

Your website images are worth a thousand words of copy -- and your website visitors will thank you for them. Studies have shown that users are 94 percent more likely to stay on a website with images than without them. 

You can easily use simple CSS to combine background images and foreground images. This gives your visuals a more engaging design by adding things like textual elements or a gradient overlay when needed. Here's how to use CSS to create image overlays: 

HTML

The HTML is fairly self-contained and combines default bootstrap components with other classes unique to the section itself.

CSS

The CSS is where most of the action occurs. Not only is the background set to use a background image, but particular importance to payed to the positioning and spacing styles. With the "pos-a" and "pos-r" classes, in conjunction with the "bottom-0" and "right-0" classes, you are able to position everything exactly as you want.

One of the best parts of the above CSS is that the class names are generic and can be used globally throughout your website, so that you created similarly related sections using different images. Want to see how this tutorial could look on your site before you invest the time in coding? Try it out first in the JSFiddle below!