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

WP SITES

2469

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Subscribe
  • Register
  • Videos
  • Log in

Need Help? - Get Coding Support Now

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 :

Click here to get full access to all tutorials

Related Tutorials

  • Different Image For Mobiles After Header At Any Screen Width

Background Image Parallax Pro

Primary Sidebar

Recently Coded

  • Showcase Pro – Remove Featured Image & Show Same Page Header
  • Infinity Pro – Change Team Page From 4 To 3 Columns
  • Infinity Pro Vertical Menu
  • Genesis Sample Theme – Custom Archive Page Template With Different Hero Images
  • Foodie Pro – Reposition Search Box Before Nav Menu

Brad Dalton Specializes In Genesis child theme customization & code modification.

Advertise · WPEngine · Genesis · Log in

  • Membership
  • by Theme
  • Contact
  • RSS
  • Newsletter ( Twice Weekly )