Digital Pro has code that automatically sets the height of Front Page 1 widget area to that of viewport height and uses Backstretch jQuery script to set an image (changeable via WordPress customizer) as its background.
There might be cases when you want the Front Page 1 section to take up only as much height as the image you upload/select in the customizer.
This tutorial provides the steps to customize Digital Pro so a rectangular image (1600 x 400 in this example) that is not as tall as the default one, 1600 x 1050 will be shown inline (img element vs as CSS background) on the front end with the widget (having two buttons) overlayed on top horizontally centered and near the bottom.
Written for and tested in Digital Pro 1.1.2.
Step 1
You might want to remove the "The default image is 1600 x 1050 pixels." text in the section's description in Customizer.
Edit lib/customize.php.
Change
'description' => __( '<p>Use the default image or personalize your site by uploading your own image for the front page 1 widget background.</p><p>The default image is <strong>1600 x 1050 pixels</strong>.</p>', 'digital-pro' ),
to
'description' => __( '<p>Use the default image or personalize your site by uploading your own image for the front page 1 widget background.</p>', 'digital-pro' ),
Step 2
If you haven't already, upload/select your desired Front Page 1 background image in the Customizer under "Front Page Image" section.
Step 3
Edit front-page.js.
Delete
Is there a way of doing this without using backstretch? I’ve noticed that google page speed really doesn’t like it.
Actually, we need to remove Backstretch from loading. I forgot to add that step earlier.
I’ve now updated the tutorial to take care of it in Step 4a.
And I thought it would be changing a number in functions.php!! Thank you for this in-depth, perfect tutorial, I will be reviewing all the code so I can use this in other themes, its been a problem for me in the past and now I’ve got the answer, thank you Sridhar!