Looking to update a background image using jQuery upon loading the website on mobile devices or screens smaller than 767px.
The specific site in question is:
I am attempting to replace the initial image on the homepage slider (the blue sky with 'vormgegeven.'). While this process works smoothly on my desktop, it faces issues on mobile devices. The alert function shows 'none' when trying to retrieve the old background-image src on mobile but works fine on desktop.
This issue seems to be related to CSS targeting, and I'm struggling to pinpoint where I've gone wrong.
If anyone can provide assistance, I would greatly appreciate it.
Below is the jQuery code snippet:
function replacePrimarySliderImage() {
$oldImg = $("#mainImageHolder .primaryHolder .parallax-slider-img").css('background-image');
alert($oldImg);
$newImg = $oldImg.replace("vormgegeven.jpg","vormgegeven_mobile.jpg");
$( "#mainImageHolder .primaryHolder .parallax-slider-img" ).css("background-image", $newImg);
}