This tutorial provides 2 different ways to change the default header hero image hero-bg.jpg with another image of any size, at any screen width.
The following images show the desktop ( default ) image on the left and the mobile image on the right :
Watch the following demo video to see how it works :
Demo Video #
Shows a different image displaying on mobiles
Code Installation #
Solution 1 – There’s 2 steps :