Homepage Background Gradient on Scroll

wavy
New Member
10 0 0

Hello!

I'm looking to add a color gradient background that changes color seamlessly as you scroll. I've seen other gradient solutions that provide a static background gradient color solution. But I'm looking to have the color gradient change as you scroll to the bottom.

The issue I've been running into is getting it to be a seamless scroll on the homepage regardless of section?

Any tips would be awesome!

--

Someone suggested following this guide below, but I can't figure out how to access the body section to test it.

https://www.w3schools.com/howto/howto_css_bg_gradient_scroll.asp

(I'm using Showcase theme)

Thanks in advance!

0 Likes
g33kgirl
Shopify Partner
223 59 71

Hi @wavy, the body section is your whole webpage container. All you need to do is add the code in the link you shared at the end of your CSS file (Themes -> Edit code -> Assets -> theme.css) and you should be able to see the effect. 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.
0 Likes
wavy
New Member
10 0 0

@g33kgirl This might be a silly question, but which part of this code is the end of the CSS file? 

 

I'm in theme.js.liquid - Is that the same?

0 Likes
wavy
New Member
10 0 0

This is the code is giving me for what I want. What portion of this do i need?

<!DOCTYPE html>
<html>
<head><style>
body {
height: 3000px;
background-image: linear-gradient(to bottom, #dd2a90, #e7157c, #ed0067, #f00051, #ef0039, #ec3529, #e64e18, #df6200, #d38400, #b8a500, #8bc400, #23df0c, #4121d8, #0064fc, #008fff, #00b4ff, #00d5ff, #00e1f4, #00ebdf, #40f2c2, #71e690, #99d75e, #bdc431, #dfac0c);}
</style>

</head>

</html>

0 Likes
g33kgirl
Shopify Partner
223 59 71

@wavy, no CSS files end with .css.liquid or .css. 

This is the code you need to add at the end of your CSS file.

 

body {
   height: 3000px;
   background-image: linear-gradient(to bottom, #dd2a90, #e7157c, #ed0067, #f00051, #ef0039, #ec3529, #e64e18, #df6200, #d38400, #b8a500, #8bc400, #23df0c, #4121d8, #0064fc, #008fff, #00b4ff, #00d5ff, #00e1f4, #00ebdf, #40f2c2, #71e690, #99d75e, #bdc431, #dfac0c);
}

 

 

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.
0 Likes
wavy
New Member
10 0 0

@g33kgirl Thanks so much for your reply! 

I did that, but it still seems to just loop the gradient in every section. Is there a workaround to have it as the main background image and have it change as i scroll on homepage?

0 Likes
g33kgirl
Shopify Partner
223 59 71

@wavy, sorry I cannot understand what exactly is your requirement. Can you share your website link and also an example website of what you want to achieve?

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.
0 Likes
wavy
New Member
10 0 0

@g33kgirl The website link is wavybooks.com, password is omw

Please reference locolove.com and look at the color gradient when you scroll

 

Thank you!!

0 Likes
g33kgirl
Shopify Partner
223 59 71

Hi @wavy, I took a look at your website. You need to add percentage to the linear gradient to add the effect you want. So something like this (you can adjust the percent to your liking) :

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%);
  
}

  

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.
0 Likes
wavy
New Member
10 0 0

@g33kgirl Thanks so much for looking into it. However, I think maybe I'm not being clear in what I'm trying to accomplish.

I would like for the background to be solid gradient color and change as I scroll down the page-> see: https://www.w3schools.com/howto/howto_css_bg_gradient_scroll.asp

However, what's currently happening is that the gradient is looping for each section. I want the homepage background to be one solid gradient instead of repeating every section. 

0 Likes