Genesis Tutorials

Infinity Pro – Different Front Page 1 Background Image For Mobiles

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 :

Related Tutorials

4 replies on “Infinity Pro – Different Front Page 1 Background Image For Mobiles”

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

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.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *