How can I seamlessly blend webpage sections together?

[webbuilder9]

Hello!

I would like to make all my pages look similar in terms of the background. Currently my page background looks similar on home page all the way to the footer, but when the footer begins the background sort of "starts over", which creates a line between the upper page and footer. This footer effect happens on every page. Similarly, when I click open a product page, the different sections are split again by "resetting" the background color scheme instead of blending all of them together. Is there a way to fix this? 

https://9u9zwo5j56x853yr-76588974424.shopifypreview.com

[Made4uo-Ribe]

Hi @webbuilder9 

I would suggest to put your main back ground in the body not in the main. 

Try this.

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "theme.liquid" file paste the code below before the </body> tag. 

body.gradient.animate--hover-default {
    background: radial-gradient(rgba(255, 105, 147, 0.6825), rgba(233, 211, 148, 1) 100%) !important;
}

• And Save.
• Result:
• 

I hope it help. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[webbuilder9]

Hello! Unfortunately this didn't work for some reason. 

[Anshul_arora · Accepted solution]

Hello @webbuilder9 ,

I have looked through your site https://9u9zwo5j56x853yr-76588974424.shopifypreview.com/ and see you have not put the code inside the style tag.

Your added code is appearing at the end of your site' footer section https://prnt.sc/WSdxlQhiv_dh. Remove the code you have put outside the style tag https://prnt.sc/Ivjdcn3gudWf and write the below mentioned code inside the style tag.

<style>
body.gradient.animate--hover-default {
background: radial-gradient(rgba(260, 110, 152, 0.6825), rgba(236, 215, 151, 3) 100%) !important;
}
</style>

As you can see, when I temporarily add the above mentioned code inside <style> tag, it shows the desired output
https://prnt.sc/-YppgRdAfCJR

I hope it helps.

Let me know if you need further assistance.

Thank you.

[Made4uo-Ribe]

Did you try to paste it on the theme.liquid?  if not try this one. 

Open theme.liquid file paste the code below beofre this tag </body>

<style>
body.gradient.animate--hover-default {
    background: radial-gradient(rgba(255, 105, 147, 0.6825), rgba(233, 211, 148, 1) 100%) !important;
}
</style>

And Save. 

I hope it help.

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[plants4friendz]

Hi, can you please advise on how to accomplish this effect on my site? I've added a background image and would like all the sections to blend together.

My site is: thespiralpath.myshopify.com pw: freeflowers

Thank you so much in advance!

[Made4uo-Ribe]

Hello,

You need to change your background color. But in your store your background is already overide. 

You mean like this? 

This is the code i used. 

html, body, [id*='shopify-section']:not([id*='announcement']):not([id*='header']):not([id*='footer']), [id*='shopify-section']:not([id*='announcement']):not([id*='header']):not([id*='footer'])> [class*='background'] {
    background: radial-gradient(at left,rgba(50, 140, 255, 1), rgba(220, 216, 230, 1)) !important;

[plants4friendz]

Is it possible to make it all flow together with the background image I'm already using?