My current approach involves using the .css() jQuery method to modify the background of a div identified as "background". This method requires specifying the property name and the desired value. The code I have written is:
function changeBackground() {
$("#background").css("background-image", "url(../assets/background2.jpg)");
}
window.onload = function() {
window.addEventListener("click", changeBackground);
};
The initial value for background-image was set to url(../assets/background.jpg). Interestingly, this setup functions properly in the Chrome session where my editor (Brackets.io) Live Preview operates, but not in a normal Chrome or when using Firefox and Opera.
EDIT: The problem originated from the path: instead of only changing the value temporarily in the css file (which was my initial assumption), it appears that jQuery itself manages the modification in the background source. Consequently, the image path must be defined relative to the javascript file—thus, utilizing url(assets/background2.jpg) rather than url(../assets/background2.jpg). Feel free to provide any corrections if necessary.
However, a new concern emerged—once jQuery alters the source of the background image, the remaining styling details from below are completely overlooked. How would one go about resolving this issue?
#background {
background-image: url(../assets/background.jpg);
background-attachment: fixed;
background-position: center;
background-size: cover;
position: fixed;
top: 0em;
left: 0em;
height: 100%;
width: 100%;
margin: 0em;
}