How to add a background image for Header and About section in Modern Portfolio Pro

kduffey asks in StudioPress forum,

I want to add an image background to Modern Portfolio Pro behind the top logo, top menu and the top widget area that says “Welcome to my website”

See my quick mock up here: https://www.dropbox.com/s/tik0v4ni2hbxsd3/mpp-change.png

Any thoughts on how to modify the theme to accomplish this?

In this article I share the code to set a large image as background for Header and About widget area in Modern Portfolio Pro.

One way of doing this is by

1. removing the code to display About widget area in mpp_homepage_widgets()
2. displaying About widget area after header in homepage
3. wrapping the Header and About sections in a custom div
4. Setting our desired background to this custom div

Step 1

In front-page.php, change