Using multiple CSS background images

Aug 27, 2018

It isn’t something developers have a need to do very often, but you can set multiple background images on a single element.


.element {
    background: url('image_path') center repeat, linear-gradient(transparent 0%, #000 100%) no-repeat;

What can you do with this? It’s only limited by your imagination, but I’m personally a fan of always using as few elements as possible when working on a project.

← Back to all articles

If you would like help support this blog, please consider donating to help keep articles ad-free.
This site is an honorary member of the 1MB Club.
No third-party advertising or data collection - More about privacy.
Built with Jekyll & hosted on Netlify.
Maintained with ♥ for the web.

This page is valid HTML