This solution enables you to change the Front Page 1 background image on mobiles.
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 :
I am using this on 40 pages…
And this on 70 posts…
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.
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
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/
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.