How to create a scrolling background gradient effect on my website?

Store Design
1

Hi I need help in achieving something similar to https://santafesparkling.com/ on my www.cafeolui.com website I edited my theme.css code with the following code but see no visible change, can someone help me identify what I am doing wrong. Thank you for the help in advance.

body {
height: 3000px;
background-image: linear-gradient(to bottom, #dd2a90 0%, #e7157c 5%, #ed0067 10%, #f00051 15%, #ef0039 20%, #ec3529 25%, #e64e18 30%, #df6200 35%, #d38400 40%, #b8a500 45%, #8bc400 50%, #23df0c 60%, #4121d8 63%, #0064fc 68%, #008fff 70%, #00b4ff 75%, #00d5ff 80%, #00e1f4 85%, #00ebdf 90%, #40f2c2 92%, #71e690 94%, #99d75e 96%, #bdc431 98%, #dfac0c 100%);

}

2

@mario_esgra1

try similar code https://codepen.io/isladjan/pen/abdyPBw

3

You have proper CSS rule for rainbow background, but many page elements have their own background which are “on top” of the body element. That’s why you can’t see your rainbow.

You may try to modify your code like this to see it actually working :

body, 
.page-container {
    background-image: linear-gradient(to bottom,#dd2a90 0%,#e7157c 5%,#ed0067 10%,#f00051 15%,#ef0039 20%,#ec3529 25%,#e64e18 30%,#df6200 35%,#d38400 40%,#b8a500 45%,#8bc400 50%,#23df0c 60%,#4121d8 63%,#0064fc 68%,#008fff 70%,#00b4ff 75%,#00d5ff 80%,#00e1f4 85%,#00ebdf 90%,#40f2c2 92%,#71e690 94%,#99d75e 96%,#bdc431 98%,#dfac0c 100%);
    background-size: 100% 50vh;
}

But header has it’s own background and logo-carousel too…

1 Like
4

Hi, thanks for the recommendation… I love the code design you shared fabulous work. Do you happen to offer your service through Fiverr?

5

Hi, thanks for sharing this code… I used it and it worked perfectly. Also just like you said the header and other elements seem to be on top. Do you offer your service through fiverr? I have a bit too much going on to fix all the issues right now and could use the help

6

@mario_esgra1

how can i help you more?

7

Hello, is this code still working? If so can it be used on Dawn 2.0?