Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Seamless gradient background for the entire site


ysong

Question

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: 

1669378248_ScreenShot2020-10-21at3_59_35PM.thumb.png.d5c9fbdc10ff243eada339056261b874.png


What I would like to achieve:

1780560549_ScreenShot2020-10-21at4_00_07PM.thumb.png.bbb3cb978e01354bcf693e5f8e817776.png

Edited by ysong
Link to comment
  • Answers 17
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

17 answers to this question

Recommended Posts

  • 0

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

LP_background_LR.jpg

Edited by timm
Link to comment
  • 0
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

LP_background_LR.jpg

Can you share site url?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

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.

 

 

Screenshot 2021-06-12 at 11.50.27.png

Link to comment
  • 0

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

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 ?

Link to comment
  • 0

 

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 

Link to comment
  • 0

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

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 

Link to comment
  • 0

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

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  🙂

 

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