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!

Replies 11 (11)

g33kgirl
Shopify Partner
390 109 142

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.
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?

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>

g33kgirl
Shopify Partner
390 109 142

@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.
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?

g33kgirl
Shopify Partner
390 109 142

@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.
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!!

g33kgirl
Shopify Partner
390 109 142

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.
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. 

g33kgirl
Shopify Partner
390 109 142

@wavy, I understand your requirement and the code that I shared should have worked on your website. You can see the demo here: https://jsfiddle.net/f7cotx2n/

I can see an error in your theme.js file in the console. So that could be interfering with the code in some way. I think you added the CSS code in your theme.js file accidentally, perhaps. I would suggest you to remove that line and refresh your website again to see if it works.

 

Screenshot 2021-05-06 at 4.48.21 am.png

 

Remove this line in red from your .js file. 

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.
mario_esgra1
Tourist
11 0 3

Hello G33Kgirl, I tried following your advice down to the letter but it does not reflect on my website for some reason. Could you please help me? the website is www.cafeolui.com