Background image with gradient overlay in CSS
Coding with AI: Learn to build a SaaS MVP in 10 days
Master practical AI development to build and launch your startup MVP in weeks instead of months. Learn to leverage AI tools and APIs effectively.
- šÆ Build real MVP: AI-powered SaaS from idea to launch
- š¤ Integrate ChatGPT, Claude, and other AI APIs efficiently
- š° Implement AI features users will pay for
- ā”ļø AI-assisted coding patterns to ship 10x faster
- š Launch your product in 10 days, not 10 months
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;
}
}
https://codepen.io/Param-Harrison/pen/yrgXvy
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);
...
}
}
https://codepen.io/Param-Harrison/pen/EvEmmW
Note: I have used
vw
andvh
for 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 š