Currently, I am attempting to create a setup where my background adjusts based on the width of the user's browser. However, I am constrained by a background specified in the external stylesheet under a specific element. While I have the ability to alter the background and modify its attributes, I am unable to substitute it with an HTML background.
I have delved into various solutions for this issue, but most of them have proven ineffective. I went as far as linking an external JavaScript file (in the HTML) that can identify screen resolution and select a background file accordingly - precisely what I need. Unfortunately, the browser fails to detect it at all, regardless of whether I embed the script within the HTML or simply link it. Thus, I am seeking a method to link it under the background setting in CSS. According to my research, this is deemed "possible but risky," albeit lacking detailed instructions on how to accomplish it.
Despite the associated risks, I am willing to experiment with this approach. Nevertheless, I am also receptive to alternative suggestions. My primary objective is to designate two different image files (identical images scaled differently) for small phones versus other devices. Although I explored srcset, which allows for responsive images in HTML, embedding it is not feasible for me. The thought of it initially excited me, although I am open to manually editing the images myself if necessary.