Within my ReactJS application, I have implemented a feature where elements are added vertically from top to bottom when the "Post" button is clicked.
https://i.sstatic.net/KwPYV.jpg
These elements display correctly on both mobile and desktop browsers. However, there is an issue when viewing on mobile - the background image keeps zooming in each time an element is added.
https://i.sstatic.net/OGfCO.jpg
To address this issue, I have included JQuery in my public/index.html file as I require it to randomly change the background image using a specific function. This functionality cannot be achieved by calling a JavaScript function within the CSS url() for the background-image.
For the desktop version, I have successfully implemented the random background image feature. Therefore, I need to update my CSS to resolve the zooming background image problem on mobile.
$(document).ready(function() {
const randomImage = chooseBackground();
if ($(window).width() < 650) //mobile browser
{
$('html, body').css('background-image', `url(${randomImage})`);
$('html, body').css('background-repeat', 'no-repeat');
$('html, body').css('background-attachment', 'fixed');
$('html, body').css('background-size', 'cover');
$('html, body').css('background-position', 'center');
}
});
My goal is to have a fixed background image on mobile without any zooming or movement, allowing users to scroll down to view all the elements seamlessly.