Front page background

Shapely
1

Hi,

I would like a background picture on my static front page only. I have tried various options with CSS but I am still getting the image on the other pages which I just want a background colour on. Can you advise? Thanks.

2

Hi, Is there no solution to this?

3

Hello there,

I hope you are doing well today.

You can add the “.home” selector to the code which will only have the code appear on the home page. It would look something like this:

/*Example CSS*/
.home .container {
background-color: red;
}

Best Regards,
Support

4

Thanks for your reply. Sorry, that didn’t work, I am maybe not explaining myself very well. The website URL is www.marcanddesign.com

I am looking to keep the photo on the front page, but would like all other pages with a white background. So far I only have a contact page, I managed to get the background white, (minus a bar along the top) but also when you submit a message on the Contact Page it still shows the photo below.

5

Hello there,

Thanks for providing that information.

You can use the following CSS code to remove the background from the other pages by going to Appearance > Customize > Additional CSS and pasting it there.


body.custom-background {
    background-image: none;

.home body.custom-background {
    background-image: url(https://marcanddesign.com/wp-content/uploads/2017/06/Web-1.jpg);
    background-position: left top;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

}

Best Regards,
Support

6

I am trying this on my website www.reubenchircop.com but I am not getting the image on the home Page.

am i missing anything ?

Thanks

7

@alphaomnia

May I know where exactly you want to have that bg image? please note your website is full width and it has different sections, this means you cant apply one image for the whole body,

Regards

8

Hi thanks for the response. I would like to have the image show only on the home page here - https://reubenchircop.com/

on all the other pages I just want a white background.

Thank you

9

Hi @alphaomnia

Ok, got it where exactly do you want to apply the image? your website is full-width, which means there is no space to add a BG image anywhere here, probably you want to add an image within one of your sections. please clarify.
I also see that you are using a block editor, have you tried to add an image in the block editor?

Regards

10

ok so now I removed the white background and left the metal structure background. As you can see on the home page the blocks are readable because of the dark backgrounds per block. Now what I’d like to do is make the other pages the same as the way it is they are unreadable. but I cannot apply a white block background on the individual pages.

Thank you.

11

Hey there

Ok, got it, please add this CSS code in the Appearance > Customize > Additional CSS:

body.page #main.container {
    background: white;
}

Regards

12

Thanks that seems to have worked for the pages but not for the blog posts. would I need to add something else to cover also the blogs ?

Thank you for your continued support.

13

Hey there

Yes, let’s try this code too:

body.blog #main.container {
    background: white;
}

Regards

14

Hi I am sorry to be late but in the meantime I had to solve other design issues on the page. At this point I have the main page as I wanted it but the blog and the individual posts are still showing the coloured background. I need it to be white.

15

Hi there

Ok, you can use this code in this case:

.main-container, .bg-secondary {
    background: white;
}

let me know results

16

That’s awesome that worked. thank you .

17

Hi @alphaomnia

Cool, good to know :slight_smile:

Let me know if you need anything else

Regards