Jump to content

Linear background for whole website

Recommended Posts

  • Replies 14
  • Views 784
  • Created
  • Last Reply

Use this CSS

body{
    background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);;
    background-color: transparent;
}
.Footer {
    background-color: transparent;
}

section {
    background-color: transparent !important;
}

header.Header {
    background-color: transparent !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
19 hours ago, tuanphan said:

Use this CSS


body{
    background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);;
    background-color: transparent;
}
.Footer {
    background-color: transparent;
}

section {
    background-color: transparent !important;
}

header.Header {
    background-color: transparent !important;
}

 

Hi! That didn't work perfectly. 🙂 It didn't cover everything with linear gradient. Picture in the attachment. 

C3D1B246-2B18-4C65-8EFF-BA9E71715A94.jpeg

Link to comment

Use new code

body{
    background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);;
    background-color: transparent;
}
.Footer {
    background-color: transparent;
}

section, .Main {
    background-color: transparent !important;
}

header.Header {
    background-color: transparent !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
23 hours ago, tuanphan said:

Use new code


body{
    background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);;
    background-color: transparent;
}
.Footer {
    background-color: transparent;
}

section, .Main {
    background-color: transparent !important;
}

header.Header {
    background-color: transparent !important;
}

 

Hey. Thank you. It worked fantastic on all pages except on this page https://www.theemailschool.com/newsletter

Not sure whether there are any fixes for it. Pictures in the attachment. 

 

Maybe. Would be it be possible that I can insert code for selected pages and leave out the one which doesn't display properly? 

And thanks. I really appreciate your help. 

www.theemailschool.com_newsletter (1).png

www.theemailschool.com_newsletter.png

Link to comment
On 1/24/2021 at 6:44 AM, jkristobans said:

Hey. Thank you. It worked fantastic on all pages except on this page https://www.theemailschool.com/newsletter

Not sure whether there are any fixes for it. Pictures in the attachment. 

 

Maybe. Would be it be possible that I can insert code for selected pages and leave out the one which doesn't display properly? 

And thanks. I really appreciate your help. 

www.theemailschool.com_newsletter (1).png

www.theemailschool.com_newsletter.png

Hi. Sorry for the delay. I was off someday.

Do you still need help on this?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
6 hours ago, tuanphan said:

Hi. Sorry for the delay. I was off someday.

Do you still need help on this?

Hey. No problem at all. Yes, please. 

I've redesigned that conflicting page and inserted your last piece of CSS. It worked for a little while and then it blocked page edit button. I couldn't edit pages. I had to remove the code. Haha. 

 

I think ideally if I could add linear gradients to individual page. So I have some flexibility. 

Thank you. 

Link to comment
On 2/1/2021 at 1:47 AM, jkristobans said:

Hey. No problem at all. Yes, please. 

I've redesigned that conflicting page and inserted your last piece of CSS. It worked for a little while and then it blocked page edit button. I couldn't edit pages. I had to remove the code. Haha. 

 

I think ideally if I could add linear gradients to individual page. So I have some flexibility. 

Thank you. 

To disable code in edit mode, replace body class with

body:not(.sqs-edit-mode)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
4 minutes ago, jkristobans said:

So I need to turn on Developer mode?

No! I don't think @tuanphan was suggesting that you do this. If you turn it on and it wasn't needed, you can cause yourself much pain!

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.