This is showing up like this because you have a lot of text inside some of the widget areas. Most sites that use Parallax backgrounds don’t have too much text, maybe a little to explain what’s going on, but not so much where it would extend beyond the length of the image. If you look at the demo you can see the difference…..But no worries, if you do plan to have that much text, we can still make adjustments to get it working.
Here’s a couple ways to work around it –
1. Easiest way is to remove the Parallax effect from your front-page.php file (I can help you remove this if you don’t want to touch the PHP code) –
//* Enqueue parallax script
add_action( 'wp_enqueue_scripts', 'aspire_enqueue_parallax_script' );
function aspire_enqueue_parallax_script() {
if ( ! wp_is_mobile() ) {
wp_enqueue_script( 'parallax-script', get_bloginfo( 'stylesheet_directory' ) . '/js/parallax.js', array( 'jquery' ), '1.0.0' );
}
}
Removing that effect should fix that instantly. Parallax works great and looks cool, but not everyone needs it or should use it depending on the type of site and widgets they’ll be using. Especially if you have odd shaped background images and a lot of text on top of them (I’ll explain this below).
2. One of the other things you can do if you do want to keep the Parallax effect is to simply add a 2nd image (taller) designed specifically for Mobile devices.
On desktop and laptop browsers, the background images will show up in full and the text will most likely show up fine on top of the images/widget sections. On smaller browsers, most developers and other professional sites usually have a 2nd image that is designed for mobile browsers to activate when the site is being viewed from a smaller device. This would usually be a taller/more vertical image that is used. So if you have a lot of text, the background image will be long enough to cover it without the text extending beyond the image exposing the body/background.
***************************************************************
This happens on pretty much any site that uses background images with Parallax. If you do a Google search you’ll see similar issues from other Developers, Theme designers and anyone that uses Parallax in general (not just Genesis Themes). What is happening is the Background images are presented to show up the best way they can without being too stretched or shrunk too small. So if you have a widget area with a lot of text/content and a background image behind it that is more wide than it is vertical, you’ll see this type of behavior when you shrink your browser.
The Background image height can only extend so far without losing quality or shrinking the width too much. So when you have a lot of text, the background image will stop at some point, and the text will still show on top of whatever image or color is in the background (most likely body background).
Like I said, if you plan to have a lot of text, then I would recommend turning off Parallax, as Parallax isn’t designed for a lot of content on top…..unless you have some large Background Images that you can use. If you have large enough images, then you could get it to work.
Let me know if that helps.
.
