Follow me on Twitter, happy to take your suggestions on topics or improvements
Background images with overlay are very common UI feature. It will be seen more on Hero, Cards components.
There are several ways to achieve it. Most preferred way is to make use of CSS pseudo elements to assign a background color with proper opacity. This method doesn't need extra HTML elements and it works in all modern browsers.
Background image with Overlay
.bg-img-overlay {
width: 600px;
height: 600px;
position: relative;
// Image as background
background: url('https://unsplash.it/600x600') center center no-repeat;
background-size: cover;
&:before {
// Pseudo element will only render if it has a content property
content: '';
// Overlay should occupy the full width and height of parent image container
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
// Overlay background-color
background-color: #000000;
// Overlay opacity, else overlay won't be transparent and show the image
opacity: 0.6;
}
}
Credits to unsplash and their contributors for generously providing images
Background image with gradient Overlay
Its same as above. Only change will be, background-color of the overlay need to be replaced with background-image with linear gradient.
.bg-img-overlay {
background: ...;
&:before {
...
// Overlay background-color
background-color: linear-gradient(to bottom right, #002f4b, #dc4225);
...
}
}
Note: I have used
vwandvhfor width and height to make it look beautiful in codepen. You can change the image width and height property and see the example working for different sizes.
Its very simple and useful technique in creating many UI components 😎
Note: This article was originally written for my blog. I am republishing it here for the amazing DEV community.
Top comments (5)
Nice "nugget". I think you can optimize the code a bit by using Multiple backgrounds. Use the top (first) background as a linear-gradient using RGBa or HSLa, then using the bottom (second) background as the image. It should work the same as using a pseudo-element but with less code.
Example below:
I made a codepen example with a one color overlay, and a multi-color overlay, both using linear-gradients.
That’s awesome. Thanks for the example, I will take note of it.
This is great!
I like to generalize this behavior in SCSS by extracting my overlays into parameterized mixins. SCSS is the best thing that has happened to me in forever.
True, SCSS is amazing.
Checkout styled-components and CSS-in-JS too if you are more into front end application development. Its making wave after preprocessors.
You know, I've tried, but I find it be a strange form of tight-coupling that I don't quite enjoy. At the same time, I think including styles with a component makes logical sense but something about bundling styles with the component, so conflicted.