Sridhar Katakam

Genesis and WordPress Tutorials

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

by 10 Comments

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

top-background-modern-portfolio-pro

Step 1

In front-page.php, change

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Hi Sridhar,

    Thanks very much for this tutorial. I am using the Foodie theme and using your instructions I’ve now got an image filling the header. However, I’ve also uploaded the logo using the Appearance > Header section – how can I get the logo to appear in front of the background image? I’ve been messing around with z-index but I think I’m on the wrong track…

    Thanks, Samantha

    Reply

  • Great tutorial, worked well.

    Question, i have a custom menu on the home page, but due to the Hero image i now cant really see the menu too well, client has picked the picture.

    Is there any tweaking i can do to make that menu more visible, ive searched the code and cant see how.

    http://ukumurra.djkdesigns.com.au

    Thanks

    Reply
    • >