Linear background for whole website

Site URL: https://www.theemailschool.com/

I would. like to add linear gradient to my whole website. From left to write and top to bottom. 

I have this piece of code but it leaves white space all around. I'm using Brine template and 7.0. 

What am I doing wrong? 

.Main-content { background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%); }

Hi. You mean linear gradient cover both page content + header/footer?

10 hours ago, tuanphan said:

Hi. You mean linear gradient cover both page content + header/footer?

Hi. Yes, please!   

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

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. 

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

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. 

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. 

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

Do you still need help on this?

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. 

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)

2 hours ago, tuanphan said:

To disable code in edit mode, replace body class with

body:not(.sqs-edit-mode)

Hey. Thank you. Not sure where is should add this code. 🙂 CSS? Shall I add to last linear gradient code you gave me? 

in above code, find body

replace with body:not(.sqs-edit-mode)

15 hours ago, tuanphan said:

in above code, find body

replace with body:not(.sqs-edit-mode)

Ahhh. Thank you. So I need to turn on Developer mode? I've never went that far. 🙂 Thank you.  

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!

1 hour ago, creedon said:

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!

Hey. Yes. I just read again  @tuanphan  reply. Now I get the point. Sorry for the trouble. I don't know what I was thinking. Haha. Thank you. I haven't turned on dev mode.