Different image on homepage

Activello
1

I would like my website background to be white with my home page to display an image as the background. I’ve tried the code below (with my own image url) but it turned all of my backgrounds white.

html body.home.custom-background {
    background-image: url('http://www.eddylysfinally.com/wp-content/uploads/2016/01/Logo.jpg');
}
html body.custom-background {
    background-color: #ffffff;
}
2

Hi @anniekus,

I hope you are well today and thank you for your question.

I visited your site and found it’s working fine now only displaying the background image on home page and not on any other pages.

Please advise.

Best Regards,
Movin

3

Hi Movin,

Thanks for your reply. The website is showing the same image as the background for every page. This is the image: http://suzyshattuck.com/wp-content/uploads/2016/05/DeathtoStock_EnergyandSerenity1.jpg

See attached images.

I would like to have that image be the background on the home page, but have the rest of the pages have a white background. Can you help me do this?

4

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Activello Options -> Other -> Custom CSS


html body.custom-background {
    background-image: none;
}
html body.custom-background.home {
    background-image: url('http://suzyshattuck.com/wp-content/uploads/2016/05/DeathtoStock_EnergyandSerenity1.jpg');
}
5

This didn’t work - it turned the background white on all my pages. Any ideas??

6

It is working fine for me in the browser inspector.

I visited your site http://suzyshattuck.com/ but didn’t find the shared CSS code anywhere in the website markup so could you please tell me where you have added it so that i can troubleshoot it?

7

Sorry I removed it when I saw it wasn’t working.

I added it in now in the Custom CSS section. As you can see, it makes the background white but does not display the image as the home page background.

8

I again visited your site to troubleshoot the issue and found instead of single or double quote you have added its HTML entity number in the CSS code as shown in the attached screenshot which is causing this issue.

Please correct this to make it work.

9

That’s not what the code looks like. I’m not sure where that’s coming from. When I went it to edit it I see the code like this:

html body.custom-background {
    background-image: none;
}
html body.custom-background.home {
    background-image: url('http://suzyshattuck.com/wp-content/uploads/2016/05/DeathtoStock_EnergyandSerenity1.jpg');
}

#masthead div#line {
    display: none;
}
div#logo {
    padding: 50px 0 0 0;
}

.navbar-default .navbar-collapse { width: 100%; } .nav.navbar-nav { float: none; text-align: center; margin: 0 auto; width: 100%; } .navbar-nav>li { float: none!important; margin: 0 auto; display: inline-block; }

.site-navigation-inner .nav-search {
    display: none;
}
10

Ok then just try using double quote instead of single quote as displayed below.

html body.custom-background {
    background-image: none;
}
html body.custom-background.home {
    background-image: url("http://suzyshattuck.com/wp-content/uploads/2016/05/DeathtoStock_EnergyandSerenity1.jpg");
}