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.
Brad did I ever tell you that you are my favorite WordPress developer? Thank you! You make things so easy.
Thanks John
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!
Hello Meg
The Javascript controls the Parallax effect so you’ll also need to add the new widget section to the js file
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!
I supplied the full .js file code Meg.
Simply remove the default and replace with my JS
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…
You don’t need to. Replace all the JS with the JS in the Gist.
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.
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
Did you include the new widget in the JS as well?
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!
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?