Fix Background in Genesis Parallax Pro theme

I’ve built a few WordPress websites using the Genesis Parallax Pro theme by StudioPress. It’s a beautiful and very well coded theme. The themes home page is comprised of various widget areas and three background images. If you have a fair amount of content in the widget areas that have background images then you may have an issue where the content is ‘longer’ than the image height; in essence the content will overflow the background image.

There are two obvious solutions to the background image problem; have less content or increase the image height. Thankfully increasing the image height is really simple using a bit of CSS. Adding the CSS as below will dynamically increase the height of the image (you may need to change the 150% to a larger or smaller proportion for your needs).

.home-section-1{
background-size: auto 150%;
}

.home-section-3{
background-size: auto 150%;
}

.home-section-5{
background-size: auto 150%;
}