Recently, while working on a new project, I had to figure out a way to set a different background image for each page of the site.
The trick was to do it without a plugin and without any type of slider and make it easy.
You should note, the method I am going to share with you is for the Genesis Framework and is not supported by legacy browsers, specifically IE 8 and older.
One of the many brilliant things about the Genesis Framework, it has a built-in feature called “Custom Body Class“, which made accomplishing my goal much easier. So easy, it only requires 3 steps!
The Steps:
- Prep your images and load them into your theme folder
- Create a new class for each page
- Assign the class (created in step 2) to the appropriate page
1. Prep your images and load them into your theme folder
If you view the completed site for this project, you’ll see that my back ground images do not fill the full-page. They are sized to 2000px by 355px. So my prep work was to crop all the images to that size.
If you are using a background image that is going to be full-page, this tutorial will still work for you!
I then created a new folder titled “bodyclass” within the “image” folder that is in my child theme folder.
/* The File Path to Images **/
http://demopress.wpengine.com/wp-content/themes/ionpartners/images/bodyclass/imagefile.jpg
2. Create a new class for each page
For this step, you will need to edit your style.css file located in your theme folder.
This might not apply in every case, but for my child theme, I had to layer two images to get the navigation and the background image to play nicely together. So the navbar has a background image and then there is the actual background image.
It is important that the image you want on top, in my case the navbar background, is listed first in the “background-image:” urls.
/* Body Class - Page Background Images**/
.home {
margin: 0 auto;
background-image: url(images/nav.png), url(images/bodyclass/home3.jpg);
background-position: left top, center top;
background-repeat: repeat-x, no-repeat;
}
.careers {
margin: 0 auto;
background: url(images/nav.png), url(images/bodyclass/careers3.jpg);
background-position: left top, center top;
background-repeat: repeat-x, no-repeat;
}
3. Assign the class (created in step 2) to the appropriate page
This is the step that I thought was going to be the hardest!
But it turns out, thanks to the Genesis Framework, it was the easiest. If you want to learn more about creating body classes you can by visiting the tutorials at StudioPress.com.
OR, you can just follow this simple step!
In my example I’ve been showing screenshots of the “Careers” page, so I will use that for my example.
Go to pages, click “edit” for the page you want to edit, in this case the “Careers” page.
Scroll down below the body editor and locate the section titled “Layout Settings”.
In the section titled “Body Class” enter the name of the class you created in your style.css file in step two. In this case it was “careers”, as shown in the screenshot above.
Now save your changes or publish your page and you’re done!
NOTE: If you do not see the section, “Layout Settings”, you may need to go to “Screen Options” at the top right of the dashboard and activate the layout settings by checking the box.
You’re Done! Congratulations
If you encountered an error or the tutorial didn’t work for you, feel free to use the comments below for assistance!
If this is something you rather not attempt on your own, feel free to contact me for a quote!