Hello!
I’m making a website ([https://www.e-festivalcom.com/]) and I’m with some difficulties to do one important thing in the final design.
The header (logo + main menu area) have the color spectrum background in the top of the page. However, when scrolling down, the background turns white.
I’ve already tried everything I know to solve it. Could you help me?
That’s because they’re 2 completely different elements, and the rainbow gradient is only applied on the menu section. It looks hella ugly when I do it, but if you really wanted to, just copy the linear-gradient onto you #main-content div with css:
#main-content: {
background: linear-gradient(to right,
rgba(150,30,30,1)
0%,rgba(224,44,44,1)
9%,rgba(224,176,44,1)
19%,rgba(244,244,48,1)
25%,rgba(41,209,47,1)
33%,rgba(47,170,34,1)
44%,rgba(47,249,189,1)
53%,rgba(40,111,211,1)
64%,rgba(40,111,211,1)
64%,rgba(25,34,160,1)
73%,rgba(79,29,186,1)
85%,rgba(226,36,169,1)
94%,rgba(102,55,60,1)
99%);
}