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.
- Firstly, you’ll need to remove the custom background image from the specific page you want to replace with a different image.
- 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.
PROPERTY | VALUE |
---|---|
background-position | the position of the background images |
background-size | the size of the background images |
background-repeat | how to repeat the background images |
background-origin | the positioning area of the background images |
background-clip | the painting area of the background images |
background-attachment | either the image is fixed or scrolls with the page |
background-color | the background color to be used |
background-image | the background images to be used |
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.
Was This Tutorial Helpful?