Hello! I wrote a code wherein the background image changes according to text shown on the screen. I previewed my code and it worked perfectly. However, when I try it on the published site, the code still works but the background image is scaled very much. For the image url, I did copy url from the media manager and pasted that link into the code.
function bgChange(url) {
$w( ‘Document’ ).background.src = url
}
$w( ‘#text1’ ).onViewportEnter((event) => { [bgChange(](bgChange(‘https://static.wixstatic.com/media/filename.jpg’)
})) [‘https://static.wixstatic.com/media/filename1.jpg’](bgChange('https://static.wixstatic.com/media/filename.jpg’)
})) [)](bgChange(‘https://static.wixstatic.com/media/filename.jpg’)
}))
[})](bgChange(‘https://static.wixstatic.com/media/filename.jpg’)
}))
$w( ‘#text2’ ).onViewportEnter((event) => { [bgChange(](bgChange(‘https://static.wixstatic.com/media/filename.jpg’)
})) [‘https://static.wixstatic.com/media/filename2.jpg’](bgChange('https://static.wixstatic.com/media/filename.jpg’)
})) [)](bgChange(‘https://static.wixstatic.com/media/filename.jpg’)
}))
[})](bgChange(‘https://static.wixstatic.com/media/filename.jpg’)
}))
$w( ‘#text3’ ).onViewportEnter((event) => { bgChange( ‘https://static.wixstatic.com/media/filename3.jpg’ )
})
I tried viewing on different browsers, incognito mode etc. but it doesn’t seem to be working. Any help would be greatly appreciated.