How to use on only one page – solution

Hello.
Someone asked this below but the thread is locked, probably since it’s so old?

Anyway, I needed the random backgrounds to only work on the home page (or any single page) You could also make this work for more than one page.

This is what i did and worked for me.

Set up all of your backgrounds and make sure they are working first.

In the admin panel of WP, go to ‘appearance/random backgrounds’
At the bottom there is a link to: ‘Edit the CSS file’
Click on this and it will open the css to edit.

Incidently, you can only access this file via FTP (if you don’t use the link in the settings) as it doesn’t show in the ‘plugin editor’ via the admin panel as it’s dynamically generated to it’s own folder in WP-content/plugins/evonapluginconfig

Anyway, this is how the css looks originally:

img.evonabackground, div.evonabackground{

			z-index:-999;
			position:fixed;
			top:0;
			width:100%;
			/*min-height:100%;*/
			margin-left:0;
			margin-right:0;
			right:0;
			left:0;
		}

This is what I changed it to.
The only way I could get it to work was to hide all backgrounds first, which is the first css rule. I then had to undo this for my homepage, in this case page-id-5, with ‘display:unset’. Your page id will be different. The way I find them is to access ‘pages’ via wp-admin and hover over ‘view’ under the page you’re looking for. The page id will appear in the url at the base of your browser. I’m sure you’ll find them.
It’s also worth noting that I also didn’t want the backgrounds displaying on post pages either. This first rule turns off the backgrounds site-wide, which is what i wanted.

img.evonabackground,  div.evonabackground {
display:none;
}
.page-id-5  img.evonabackground, .page-id-5 div.evonabackground{
display:unset;
			z-index:-999;
			position:fixed;
			top:0;
			width:100%;
			/*min-height:100%;*/
			margin-left:0;
			margin-right:0;
			right:0;
			left:0;
background-position:center center;
background-size:contain!important;
		}

The last two css rules worked better for me for sizing and responsiveness.

You could apply this to other pages at the same time but just copying and duplicating the selectors at the top, with a comma, and adding other page id’s. Like this

.page-id-5 img.evonabackground, .page-id-5 div.evonabackground, .page-id-27 img.evonabackground, .page-id-27 div.evonabackground

If you need the opposite of this; display on most pages but not a one or a few, it’s easier to just leave the original code as is but add something like this to hide on one;

.page-id-5  img.evonabackground, .page-id-5 div.evonabackground, .page-id-27  img.evonabackground, .page-id-27 div.evonabackground {
display:none;
}

This would display everywhere but these two pages.

I hope this helps. This plugin still works well in 2020 with WP 5.3.2