Kevin Powell - Community•7mo ago

Parallax background image in sticky section headers

I have a fully functional CSS only layout for a Kanban component. It works fine. What I am struggling with are the swimlane headers on a gradient background. Attached are two images, one with the swimlane headers with a background gradient (fixed) set and one with the background removed to show what it is hiding (see the second image). What I am trying to do is set a gradient background to each header so that when I scroll, it needs to be transparent. I am struggling to implement parallax background for the headers with only CSS. I could do it with JS but really do not want to. Any ideas?

2 Replies

Fartasia•7mo ago

Needed to rubber duck it. If anyone is interested in the solution, it turns out to be quite simple... Changed:

    position: sticky;
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(135deg, #4596EA, #86D5E0); /* hacled colors */

    position: sticky;
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(135deg, #4596EA, #86D5E0); /* hacled colors */

to:

    position: sticky;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-image: linear-gradient(135deg, rgb(47,128,237), rgb(178,255,218));

    position: sticky;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-image: linear-gradient(135deg, rgb(47,128,237), rgb(178,255,218));

use the same background-image for the section as the background and the browser aligns the two backgrounds for you.

Fartasia•7mo ago

The section background now blends nicely with the page background giving the appearance of transparency and also hides the scrolling content beneath the sticky section divs at the same time. This is a dynamic control for an app. If anyone is stuck with the same issue that I had, then I can post a codepen

Gaming

Programming

Parallax background image in sticky section headers