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

WP SITES

2665

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

How To Replace Images On Mobile Screens Only

This download includes the code which enables you to display a different background image for any widget area on mobiles.

In this case, you can use the code in this tutorial to display a specific part of the image on mobile screens which is the person positioned in the bottom right of the original image.

Here’s the images used in the demo video :

Full Size Original Desktop Image
Default Mobile To Be Replaced
Default
Custom Mobile Image
Custom

Watch Demo Video #

Tested using the Home Section 1 widget area in Parallax Pro however will work in any Genesis child theme by changing the CSS classes.

Replaces the bg-1.jpg background image from the parallax-pro > images folder for home-section-1 with mobile.jpg when the screen width reaches 680px width.

Installation #

There’s 3 steps relating to usage of the files in the download folder :

Step 1 : Upload the front-page.php file to the Parallax Pro themes root directory replacing the default front page template. This file includes additional code on line 60 only which you can use in any other Genesis child theme.

Register or login to access the download folder :

Register for full access

Related Tutorials

  • Different Image For Mobiles After Header At Any Screen Width
  • Refined Pro Replace After Header Desktop Image With Different Image For Mobile Screens

Background Image Parallax Pro Theme

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems