Infinity Pro – Different Front Page 1 Background Image For Mobiles

Mar 18, 2019

—

This solution enables you to change the Front Page 1 background image on mobiles.

Desktop

Mobile

In this case, the code executes at 600px width removing the desktop image and replacing it with a image named mobile.jpg added to the Infinity Pro themes images folder.

The code enables you to use any size image replacing the default at any width.

Demo Video #

Shows a different image replacing the default image as the background image to the Infinity Pro themes front page 1 widget area.

Code Installation #

There’s 4 steps :

4 responses to “Infinity Pro – Different Front Page 1 Background Image For Mobiles”

Tod Dale

July 27, 2020

I am using this on 40 pages…

https://wpsites.net/web-design/use-infinity-pro-themes-front-page-template-on-unlimited-single-pages/

And this on 70 posts…

https://wpsites.net/web-design/infinity-pro-custom-single-post-template-with-front-page-section-1-replica/

I utilize custom fields image-1, section-1, and section-2. This gives me a “landing page” with full article below the fold in section-2.

Desktop version looks great, thank you.

I see a new tutorial at https://wpsites.net/web-design/infinity-pro-different-front-page-1-background-image-for-mobiles/

Is there a tutorial that will help serve a unique Front Page 1 Background Image For Mobiles on each page and post of my website?

Please advise.

Reply
1. Brad Dalton
  
  July 27, 2020
  
  If there is, it will be listed under this tag https://wpsites.net/tag/infinity-pro/
  
  Otherwise, you can order a custom tutorial for $75 https://wpsites.net/terms-of-service/#additional-tutorial-requests
  
  Reply
  1. Tod Dale
    
    July 27, 2020
    
    So $75 for the pages tutorial and $ 75 for the posts tutorial? This will get me decent background images in portrait and landscape on mobiles?
    
    https://clovisplumbingservices.com/services/faucet-installation/
    
    Reply
    1. Brad Dalton
      
      July 27, 2020
      
      At what width are your referring to when you say mobile? The mobile image won’t look the same on portrait and landscape. You can’t make a image look perfect on all widths. It will either be stretched using CSS or jQuery, scaled down or cutoff. So you’ll need to choose a width for mobile and crop your mobile image for each post and page. Are your using ACF to add images or WordPress custom fields? I need more information before i confirm.
      
      Reply