CSS To Add Different Background Image To Cover Full Body On Specific Page

This tutorial provides 2 ways to display different background images on different pages and posts of your site.

When you add an image using the Custom Background featured under your Appearance menu, it displays the image site wide.

If you want to display a different background image on one or more pages like your landing page, home page or front page, you need to follow 2 steps.

1. Firstly, you’ll need to remove the custom background image from the specific page you want to replace with a different image.
2. Secondly, you’ll need to add your image using CSS or another method. I’ll show you how to add the image using CSS.

1. Remove Custom Background Image From Specific Page

Here’s the PHP code you can use as is or in a custom function with conditional tag to remove the image.

2. Add Different Background Image Using CSS

And here’s the CSS code which pulls your new image from your child themes images folder if it matches the same file name, extension and path.

body.home {
    background-image: url('images/home-bg.png');
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

Clearly, you may like to change the values for some or all of the background properties in the CSS to suit your own requirements.

This post was written based on this question from Ted.

I’m using the Appearance > Background feature to upload a background image to be used throughout the site, but I’d like a different bg image for the home page.

Related Tutorials

• Responsive Full Screen Background Image Template For Genesis
• Add Background Image to Blog Page
• Show Featured Image On Single Post & Page Background Using Backstretch
• Genesis Page Templates for Background Images