Set background image on homepage only

Hello,

I have uploaded a background image but I would like this to appear on the homepage only. Does anyone know the CSS to do this?

Also how do I remove it altogether from mobile?

Thanks

https://greyhound-keyboard-sa3k.squarespace.com/

Add to Home > Design > Custom CSS

@media screen and (min-width:641px) {
.homepage {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/10/boost-generatepress.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
}

Replace your image url.

Hi that's great for getting rid of it on mobile, thanks.

When it does appear, I also wanted it to appear on the homepage only, so delete it from all other pages. How do I do this?

1 minute ago, LivAils said:

Hi that's great for getting rid of it on mobile, thanks.

When it does appear, I also wanted it to appear on the homepage only, so delete it from all other pages. How do I do this?

that code for only desktop & tablet (min-width:641px)

that code for only homepage (.homepage)

Ah i see thanks. Yes it is not showing on the other pages but it is still showing when I click on each thumbnail (on the homepage). How do I remove it from these posts?

2 minutes ago, LivAils said:

Ah i see thanks. Yes it is not showing on the other pages but it is still showing when I click on each thumbnail (on the homepage). How do I remove it from these posts?

Difficult. Thinking.....

Thank you. I'm not sure if it is something to do with projectPages but this doesn't seem to extend to the background. Let me know if you are able to think of anything!

Hello I would like to use the background image only on my homepage and not on the entire website.

http://laurafongprosper.com

Can somebody please help me ?

9 hours ago, laurafongprosper said:

Hello I would like to use the background image only on my homepage and not on the entire website.

http://laurafongprosper.com

Can somebody please help me ?

Add to Home > Design > Custom CSS

.homepage div#canvas {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/10/boost-generatepress.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

THANK YOU...!!

But it still shows on the links pages like this:

http://laurafongprosper.com/#/mantra-2020/

or 

this:

http://laurafongprosper.com/#/planetary-landscapes-2019/

I only want it on the homepage where all the thumbnails are is this possible...???

THANK YOU VERY MUCH FOR YOUR HELP 

:)

15 hours ago, laurafongprosper said:

 

try

body.homepage:not(.index-page-open) div#canvas {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/10/boost-generatepress.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

now it's perfect !

thank you so much

L

Hello! I'm trying to get this code to work and am having no luck . . . I'm in 7.0, the website is 

http://www.elisepreiss.com/

And I'm getting a double background on the home page, and the background on the menu pages. I'd like it just once, on the home page only. How did I mess up? Ha!Thank you!

//bg image on home page only//
body.homepage:not(.index-page-open) div#canvas {
    background-image: url(https://images.squarespace-cdn.com/content/v1/51b10c6de4b0236194eaaf0c/1668646772871-UWPWFXA1B0XJC4L1EMT1/paysages-de-la-chalosse.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

Hello to anyone who reads my question, above . . . I solved my own problem. This code works beautifully, it was user error (obviously) and everything looks and works perfectly.