fbpx

Set a different background image for each page in a Genesis child theme

THIS POST MAY CONTAIN AFFILIATE LINKS. PLEASE READ MY DISCLAIMER FOR MORE INFO.

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.

New tutorial: how to use the featured image widget to assign a background image to a page or post. Read it here => https://wp.me/pisGP-1J2

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:

  1. Prep your images and load them into your theme folder
  2. Create a new class for each page
  3. 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.

bg-image-example

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.

bg-images

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”.

genesis-body-class-feature

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!

Advertisements

17 thoughts on “Set a different background image for each page in a Genesis child theme”

  1. 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.

    Reply
    • 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

      Reply
      • 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,

        Reply
  2. 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.

    Reply
    • 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

      Reply
  3. 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

    Reply
      • 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.

        Reply
  4. 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!!

    Reply
    • 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

      Reply
  5. 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

    Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.