1 year ago

I recently worked on a project that had a background image covering the entire body of the page. One of the differences was that the background also needed a colored overlay, in this case a black overlay with slight opacity.

After some digging I realised that you can pass multiple values to the background-image CSS property. body { background-image: url('bg-img.jpg'),...; }

body { background-image: url('bg-img.jpg'), linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); background-blend-mode: overlay; }