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!
Excellent post, Chris! I’m a big fan of Genesis framework when it comes to WordPress. But being a novice, I must depend on tutorials for code snippets to customize my themes and explore various possibilities. Folks like you really make a difference to the whole ecosystem by sharing your knowledge and spreading happiness. Cheers.
Susanta,
Thank you for your kind words! Glad to hear you’re a Genesis Fan! Please let me know if there is anything I can do to help you further!
– CHris
Hello Chris,
Happy New Year! It’s been a while and I trust you’re doing great!
I wondering if you could help me with this!
There’s this website: //redacted\\ and I see that it has used a pseudo element before site content, giving an impression of a different background color.
It’s a non-genesis theme. How do I approach to replicate this design into a Genesis theme?
Thanks,
Based on the design I see when visiting the link, I’d say start with the Genesis Sample child theme, it’s pretty close to what that site looks like.
— Chris
Hey Chris:
I just came across this post, which offers the precise solution I have sought for the past week. Extensive experimentation on my part, and I didn’t even consider this, which as you point is beautiful in its simplicity (i.e. Genesis rocks). Yours is the only post I have come across with this particular solution in the public domain.
2-years and it is still giving! We appreciate it.
Randall, thanks for leaving the comment!
I’m glad the tutorial was helpful!
Please let me know if there are any other tutorials I can create for you.
– Chris
one of your images is broken in this tutorial … genesis-body-class-feature
Fixed. Thanks for letting me know!
– Chris
Hi Chris,
Nice tutorial. Thanks. Also gives some insight to how WordPress & Genesis work. Any suggestions as to how to get your method to work on the Genesis site-container class instead of the body class?
Thanks
Gijs
What theme are you working with, and why at the site-container level?
Hi Chris,
I am working with Genesis and Enterprise-pro. However some more experimentation and deep thought enabled me to come up with the solution.
By using your method and simply adding the .site-container class to the CSS as follows
.backhome .site-container {
margin: 0 auto;
background: url(images/trudy-heemskerk-coaching-training-home.jpg);
background-repeat: repeat;
background-position: top left;
background-attachment: scroll;
}
The reason is that the design called for it. Best to check out coaching.trudyheemskerk.nl to see what I mean. An added bonus was that I could also use your method to specify a different headline in the header on every page by using the content option.
.backhome #title2a li:before {
content: “Datgene groeit”;
}
.backhome #title2b li:before {
content: “waar je energie aan geeft”;
}
Thanks for getting back and thanks for sharing this piece of information.
Sounds good. And looks good! Thanks for sharing the new code.
Hi, Chris.
I tried your code for the Agency Pro theme but it didn’t work. I included this code at the bottom of my CSS:
/* Body Class – Page Background Images**/
.bricks {
margin: 0 auto;
background: url(images/bodyclass/bricks.jpg);
background-position: left top, center top;
background-repeat: repeat-x, no-repeat;
}
and then added the custom body class called “bricks” without the quotation marks to my demo page here: https://incontrolsites.com/1/sample-page/
However that page continues to show the backstretch image shown in my customize section.
Ideally, I’d prefer to have the backstretch that I set in the customizer to show for all pages/posts… and then set a bodyclass for my home page only. In other words, I’d love to just have my homepage image be different than everything else, but I’m not sure how to do that since my home page is made of widgets.
Any assistance?
Thank you!!
I’ll address this issue in another post. It’s a completely different tutorial. However, I already sent Lynn the code to resolve this so if anyone needs it before I get the tutorial up, let me know in the comments and I’ll send it to you.
– Chirs
Hi,
Can you please help me to remove the body background image on this page only as I cannot identify where this image coming from. I have tried changing it to another image but would also work if it can be made only white.
Thanks in advance
http://www.geoinvesting.developingsense.com/landing-page-1/
So, you’re referring to the image of the buildings that is background to the entire page correct?