• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Add Extra Background Image To New Home Widget Section in Parallax Pro

If you’ve added a 7th home widget to the Parallax Pro theme by StudioPress, you may also want to add an additional background image to your new content area.

By default, this theme already includes 3 background images for the 1st, 3rd and 5th sections on the front page.

In this tutorial, i’ll show you 2 ways to add a 4th background image to the 7th home widget section otherwise the background and widget title will be white which isn’t ideal.

Register for full access


Note from StudioPress: The Parallax Pro theme demo uses images with dimensions of 1600px by 1050px for this area. The images used in these areas must be a minimum of 1140px wide. The widgets used in these widget areas will overlay the background images when used.

Parallax Pro Theme

Reader Interactions

Comments

  1. John F Schuster says

    November 10, 2014 at 11:11 pm

    Brad did I ever tell you that you are my favorite WordPress developer? Thank you! You make things so easy.

    Log in to Reply
    • Brad Dalton says

      November 11, 2014 at 5:15 am

      Thanks John

      Log in to Reply
  2. Meg says

    July 29, 2014 at 6:34 pm

    The background image that I added isn’t scrolling with the parallax effect, and my top background lurches over like Emilee describes as well. How do I implement the scrolling effect on my last image?

    In the code, for the div class of each odd home section, the style lists “background-position: 50%” with a px number that changes as I scroll on the page. But I can’t see how to edit this to add that feature on the new background.

    Thanks for your help!

    Log in to Reply
    • Brad Dalton says

      July 29, 2014 at 9:38 pm

      Hello Meg

      The Javascript controls the Parallax effect so you’ll also need to add the new widget section to the js file

      Log in to Reply
      • Meg says

        August 4, 2014 at 1:31 am

        Thanks Brad! I’m not sure how to add that – I don’t see an easy way for me to edit the js file. Do I need a plugin for that? Or is there a way to edit the java that I’m unaware of? I don’t think the edit for the js was in your original post, and I’m not sure where to insert it.

        Thanks again!
        Sorry for the hassle!

        Log in to Reply
        • Brad Dalton says

          August 4, 2014 at 1:48 am

          I supplied the full .js file code Meg.

          Simply remove the default and replace with my JS

          Log in to Reply
          • Meg says

            August 7, 2014 at 9:30 pm

            I’m so sorry for all the trouble – I’m not sure I know how to edit the JS file – I can’t view anything but the CSS and .php files…

          • Brad Dalton says

            August 8, 2014 at 1:28 am

            You don’t need to. Replace all the JS with the JS in the Gist.

        • marisa says

          December 2, 2014 at 12:48 am

          Meg, I know what you mean. Under the parent or main parallax theme, there is a js directory. That is where the parallax.js file is. You can edit that file, or maybe make a new js directory in your child theme if you are using one, in the same directory as lib is.

          Log in to Reply
  3. Emilee says

    July 24, 2014 at 1:51 pm

    Could you please help me… I just tried adding the new code to my site to add the 2 extra featured widgets. Now they won’t scroll correctly though. Could you tell me what I am doing wrong? Also, does it seem that the leading tomato image lurches over when you start to scroll?

    THANK YOU!!
    Emilee

    Log in to Reply
    • Brad Dalton says

      July 29, 2014 at 9:40 pm

      Did you include the new widget in the JS as well?

      Log in to Reply
  4. Meg says

    July 3, 2014 at 10:36 pm

    I added several widgets to my page, paying close attention to all of the instructions you gave on both tutorials regarding adding widgets, but the background images on the widgets that I added aren’t utilizing the parallax scrolling effect. What did I do wrong, and how can I fix it?

    Thanks so much!

    Log in to Reply
  5. Meg says

    July 3, 2014 at 9:57 pm

    I’ve added several widget sections to my website, and followed closely all your instructions for adding sections and background images, but the background images I added don’t utilize the parallax scrolling like the defaults. What did I do wrong?

    Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.