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.
You might want to remove the "The default image is 1600 x 1050 pixels." text in the section's description in Customizer.
'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' ),
'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' ),
If you haven't already, upload/select your desired Front Page 1 background image in the Customizer under "Front Page Image" section.
To view the full content, please sign up for the membership.
Already a member? Log in below or here.