About Decorative Overlays

With CSS you can create an overlay with an image or gradient background which will be ignored by mouse events and will pass all activities to the elements underneath.

1
2
3
4
5
6
7
8
9
.decorative-overlay {
    pointer-events: none;
    background: url("../img/shining.png");
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

The essential part here is pointer-events: none;.

Tips and Tricks Web Design CSS3

Also by me

Django Paddle Subscriptions app

For Django-based SaaS projects.

Django App for You
Django GDPR Cookie Consent app

For Django websites that use cookies.

Django App for You
Django 3 Web Development Cookbook - Fourth Edition
Book for You
Django 3 Web Development Cookbook

Learn how to build practical web projects with Django 3.
1st things 1st
SaaS for You
Online prioritizer "1st things 1st"

It's not for everyone, but it might be for you!