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

Apr 9, 2014

—

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.

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

Comments

13 responses to “Add Extra Background Image To New Home Widget Section in Parallax Pro”

John F Schuster

November 10, 2014

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

Log in to Reply
1. Brad Dalton
  
  November 11, 2014
  
  Thanks John
  
  Log in to Reply
Meg

July 29, 2014

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
1. Brad Dalton
  
  July 29, 2014
  
  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
  1. Meg
    
    August 4, 2014
    
    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
    1. Brad Dalton
      
      August 4, 2014
      
      I supplied the full .js file code Meg.
      
      Simply remove the default and replace with my JS
      
      Log in to Reply
      1. Meg
        
        August 7, 2014
        
        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…
      2. Brad Dalton
        
        August 8, 2014
        
        You don’t need to. Replace all the JS with the JS in the Gist.
    2. marisa
      
      December 2, 2014
      
      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
Emilee

July 24, 2014

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
1. Brad Dalton
  
  July 29, 2014
  
  Did you include the new widget in the JS as well?
  
  Log in to Reply
Meg

July 3, 2014

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
Meg

July 3, 2014

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