codetheweb.blog | 🖥🚀

I have a layout set up like in the snippet below.

I am trying to make a sticky header with margin-top: 20px;

I was thinking of a method, that could produce a sticky header, without the content to overlap the top-margin of the sticky header when scrolling down.

In the snipped provided, you can see, that the content overlaps the empty space above the header part. This is what I want to avoid. I want to see 20px of the background image above the header at all times.

The only solution I could come up with, was splitting the whole content into a header div and a body div, and giving both a background, so that the background would still look like one piece.

This is illustrated in the picture given, on the right side. This is how I know it can be done, but to me it feels like this is not the best approach, since I would like to have the content grouped into one div and not into 2 seperate ones.

On the left side is what I would like to achive: The blue part of the content should not be visible, instead, the background picture should be visible. And the header should have the desired position: sticky; top: 20px;.

Is this even possible in any other way, or do I have to split up the header and the content into 2 different div`s to achieve this?

Here`s the snippet to check out the current behaviour: