Hide scrollable content behind transparent fixed position divs when scrolling the page?

Question

I have a div called header that is set up with a fixed position. The problem is when I scroll the page the content of the page shows up behind the header (the header is tran

Answer 1

I fixed this problem using the background property with a color, you can use var even if you'd like to

.header{
    width:100%;
    position:fixed;
    z-index:10;
    background:blue;
    /* background: var(--my-var-value);  You can do this if needed*/
}