• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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 :

add a unique background image behind the archive title

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 :

Register for full access

Related Tutorials

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

Infinity Pro Theme

Reader Interactions

Comments

  1. fotod0g13 says

    June 11, 2018 at 1:11 pm

    Hmmm,
    Hi Brad
    I tried this and worked like a charm on the infinity theme when I built an archive page for categories but tried to use it to place an image after the header for 2 parent pages with no luck – using the ACF pro-

    Sending you an email to see if this makes sense to you, or if I am doing something stupid ( not ruling out the stupid on my end )

    Log in to Reply
    • Brad Dalton says

      June 11, 2018 at 8:26 pm

      Try this https://wpsites.net/web-design/infinity-pro-single-page-title-over-full-width-hero-image-image/

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.