Jump to content

Linear background for whole website

Go to solution Solved by tuanphan,

Recommended Posts

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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
  • Solution

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

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