Image Behind Archive Title in Infinity Pro

This tutorial enables you to add a unique background image behind the archive title like you see in the following screenshot :

The image above shows the category page title displaying over the image in the same way the front page 1 widget behaves. The site header elements also display over the background image and site header background changes to white on scroll.

You can easily adjust the height of the background image and use unique images ( with fallback ) on every archive page :

Here’s the demo video which shows the image displaying at half the height of the default height :

Demo Video

Shows the default image displaying when the ACF plugin is inactive. Also shows how the image and the are responsive on smaller screens and how you can change the height of the images by modifying the CSS value on line 84 of hero.css.

Note : This solution requires the installation of the ACF plugin however, if you don’t want to use a plugin, you can hard code the path to your images in the template, support for which, is provided to registered users.

Installation

There’s 3 steps once you access the download folder :

Step 1 : Upload the file named category.php to the Infinity Pro theme folder.

Step 2 : Upload the file named hero.css to the Infinity Pro theme folder.

Step 3 : Create a new ACF field using the following field settings :

You can also add a fallback image named hero.jpg to the Infinity Pro images folder.

Register or login to access the code in the download folder :

Related Tutorials

• Infinity Pro Single Page Title Over Full Width Hero Image Image
• Infinity Pro Single Post Title Over Image