• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2665

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

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.

Background Image Minimum Pro Theme

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems