Seamless gradient background for the entire site

Site URL: https://aria.squarespace.com/

Hi, 

Using version 7.1. 

I would like to create a seamless gradient background for all the pages, including the portfolio page but excluding the footer.
However, the code I am using is creating a gradient for each section. 

Here is the code I am using:

.white:not(.has-background) .section-background {
  background-image: linear-gradient(
    to bottom right, 
    #99cbc6, 
    #e3ccc2
  )
}

Please help! Thanks in advance for the input.

The gradient is applying separately to each section here: 

What I would like to achieve:

What is access password?

Did this get solved? I'm looking to do the same thing ☺️

On 4/27/2021 at 3:33 AM, AnnMade said:

Did this get solved? I'm looking to do the same thing ☺️

Can you share link to your site? We can take a look

Hello,

I recently finished with a (small) website for a client and they kinda want the same idea with a seamless gradient. I tried with some css code I found on the forum but it stays in one block. 

I have a 7.0 template and I used the Nueva template.

I uploaded the background (gradient) to show/ask if this is possible to use as a seamless background.

I kept tweaking the gradient and added a few thing. Maybe it's not possible to use it ass a seamless background ?

Can anyone help or guide me in the good direction ?

Thanks in advance,

Tim

10 hours ago, timm said:

Hello,

I recently finished with a (small) website for a client and they kinda want the same idea with a seamless gradient. I tried with some css code I found on the forum but it stays in one block. 

I have a 7.0 template and I used the Nueva template.

I uploaded the background (gradient) to show/ask if this is possible to use as a seamless background.

I kept tweaking the gradient and added a few thing. Maybe it's not possible to use it ass a seamless background ?

Can anyone help or guide me in the good direction ?

Thanks in advance,

Tim

Can you share site url?

you mean this ? 

https://sepia-carillon-yx9l.squarespace.com/config/pages

15 hours ago, timm said:

you mean this ? 

https://sepia-carillon-yx9l.squarespace.com/config/pages

/config is admin url. See how to find page url

Thanks Tuan for helping out 🙂

I'm not completely following if I click on the link you send to find the admin url.

I have on every of my 5 pages an identical name, so I have an about page and the url slug is  /about

Is this what you mean ?  Or is it beter to email you.

Try adding to Design > Custom CSS

body .Main {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2021_06/LP_background_LR.thumb.jpg.328d2fca45adaff76fb3a6bc689f1874.jpg);
    background-repeat: repeat-x;
}

I added the code in the custom CSS but I get a repeat on the body.

I realise I need to adjust the image and make it seamless.

The image should start from the header until the footer as 1 image with no repeat.

Is this possible ?

change 

repeat-x

to 

no-repeat

ok let me try it 🙂

I adjusted the css code on the main section to test and it shows the background image 1 time so that is good , but it's placed on the left side and not taking the entire width.  

How can I solve this ? maybe by adding a seamless texture and put repeat again on -x ?

Is it possible to have that same image also in the header and footer ? so it's 1 image running all over the length of the page ?

Thanks again for the help 

Try this

body .Main {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2021_06/LP_background_LR.thumb.jpg.328d2fca45adaff76fb3a6bc689f1874.jpg);
    background-repeat: no-repeat;
	background-size: cover;
}

ok this seems to work and place it over the entire width but the image get stretched. what is the best resolution to make a background image/gradient? It probably get stretched because my screen is a 27inch.

2nd issue to tackle is how can I to have the same image in the header also where I have the navigation and in bottom part (footer) ? but still 1 image.

Thank you 

Use new code

body .Main {
    background-image: url(https://content.invisioncic.com/p289038/monthly_2021_06/LP_background_LR.thumb.jpg.328d2fca45adaff76fb3a6bc689f1874.jpg);
    background-repeat: no-repeat;
	background-size: cover;
}

header.Header.Header--bottom {
    position: absolute;
    top: 0;
    z-index: 999;
    background: transparent;
    width: 100%;
    left: 0;
}

footer.Footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

Ok, I see the background image in the header and main but it pushes the main image up so it's in the navigation and logo.

The footer is stays empty.

Is it maybe better if I give you access to the site so you can have a look what is going on ? 

Thank you again for helping  🙂

hi all, I am trying to accomplish the same as ysong. 

here is the code i am using: 

body{background: linear-gradient(to right, #d16ba5, #ec7585, #f08d68, #e0aa59, #c2c765, #95d381, #60dba9, #00ded5, #00d1ff, #00bbff, #4299ff, #cb5ffb)!important;

where do i need to put this code in order for it to apply the gradient seamlessly across all pages and sections?

On 1/21/2023 at 5:41 AM, yulianeedshelp said:

hi all, I am trying to accomplish the same as ysong. 

here is the code i am using: 

body{background: linear-gradient(to right, #d16ba5, #ec7585, #f08d68, #e0aa59, #c2c765, #95d381, #60dba9, #00ded5, #00d1ff, #00bbff, #4299ff, #cb5ffb)!important;

 

where do i need to put this code in order for it to apply the gradient seamlessly across all pages and sections?

Home > Design > Custom CSS