Add Background Image To Landing Page Template Only

This solution enables you to add a background image to 1 specific page template without using the built in background image function which displays the image on every page.

Based on the following question from a member of the Genesis community :

I have installed a background image on Minimum Pro theme and have reduced the image to as small as I like to render correctly, but I’m still having some problems with page speed because of the background image. I’m only using it on the landing page – it isn’t a design element on any of the other pages, so I really don’t need it. I would like to set the image to appear on the Landing Page template ONLY? Can I get some help or guidance on how to do this?

Upload your background image to your WordPress Media Library, swap out the link to your image in the following CSS and add to the end of your child themes style.css file :

body.landing-page {
	background-image: url("http://test.dev/wp-content/uploads/2017/09/background-image.jpg");
	background-position: left top;
	background-size: auto;
	background-repeat: repeat;
	background-attachment: scroll;
}

You can also add your image to your child themes images folder and use this CSS instead :

body.landing-page {
	background-image: url('images/background-image.jpg');
	background-position: left top;
	background-size: auto;
	background-repeat: repeat;
	background-attachment: scroll;
}

This is exactly the same CSS generated by the add_theme_support( 'custom-background' ); function which adds the background Image setting in the WordPress Customizer.

Tested using the Minimum Pro & Genesis Sample child themes by StudioPress. Should work fine in any WordPress theme.

Here’s the result :

This solution will work in any page type.