background change via javascript

When you say offline, do you mean in a locally installed WordPress, or in a normal HTML page?

I see two things.
1. The $ must be defined. In WordPress, jQuery is in no-conflict mode, so $ is not defined.
2. In CSS, the url is relative to the stylesheet, but if it’s not in a separate file, it’s relative to that page. WordPress pages are dynamic (they don’t exist as a file) so you can’t use relative CSS paths in PHP or javascript.

Hi Joy,
sorry I didn’t explain well.
It worked in WP xampp, now stopped to work .. it is strange.
I must have changed something in previous and can’t remember what.

Both js and css codes are in external file, not inside the php page.

I didn’t ay that “$” is “jQuery” in my WP codes: there are several jQuery external codes and all of them work well.

CSS I don’t understand what you mean:

the codes are not inside the php page, and the url is to an image stored in library: ../ is the path to the image, because all (codes and images) are in various subfolders of wp-content/uploads.

in fact, to avoid jQuery for testing, also tried
function bg1() {document.getElementsByClassName("site-content-contain")[0].style.backgroundImage = "url('https://127.0.0.1/wordpress/wp-content/uploads//bg-images/VegBDbg.jpg')";}
but it does not work as well

Joy,
now I have another problem so can’t proceed until solved.
-started site upload via FTP and completed as https://www …
-only later (because they were on delay) the provider applied the ssl dv cert, and the address became https
-of course I could continue because saved in my temp internet files, but when cleaned the temp files obviously stopped to work
-now when try to enter gives as admin 404 not found
-database wp_options and change siteurl into https (both siteurl and home), but I’m not sure if correct
tomorrow study the database and see how to solve.
do you know?
thx

Hi @joyously,
I had to solve some plugin conflict after installed ssl dv cert (multilingual becomes crazy when you change from http to https, even if you follow all the procedures, settings and wp-config + .htaccess).

Now all seems ok. but the issue of the background change with js not solved.
Do you have any idea? It does not work either in jQuery (writing jQuery instead of $) and in pure javascript.
The code is external in a javascript physical page, and the url is to some .jpg in uploads … cannot understand why it does not work.

If the URL is a complete URL (starts with http), and it doesn’t work, then it’s something else. If it’s not a complete URL, it’s that.

yes, must be something with the URL, because the code is “working”: I mean that the bg changes from previous to blank, which means that the js code has its effect but does not display the new bg.
this make me thinking that it doesn’t find the URL

It works, only with javascript and not jQuery, which means that there was some mistake or permalink problem…

function bg1() {document.getElementsByClassName("site-content-contain")[0].style.backgroundImage = "url('https://www.biomotive.com.hk/wp-content/uploads/bg-images/VegBDbg.jpg')";};
function bg2() {document.getElementsByClassName("site-content-contain")[0].style.backgroundImage = "url('https://www.biomotive.com.hk/wp-content/uploads/bg-images/RecycledBDbg.jpg')";};
function bg3() {document.getElementsByClassName("site-content-contain")[0].style.backgroundImage = "url('https://www.biomotive.com.hk/wp-content/uploads/bg-images/MicUCObg.jpg')";};
function bg4() {document.getElementsByClassName("site-content-contain")[0].style.backgroundImage = "url('https://www.biomotive.com.hk/wp-content/uploads/bg-images/VegOilbg.jpg')";};
function bg5() {document.getElementsByClassName("site-content-contain")[0].style.backgroundImage = "url('https://www.biomotive.com.hk/wp-content/uploads/bg-images/AnimFatbg.jpg')";};
function bg6() {document.getElementsByClassName("site-content-contain")[0].style.backgroundImage = "url('https://www.biomotive.com.hk/wp-content/uploads/bg-images/OtherProdbg.jpg')";};
function bg7() {document.getElementsByClassName("site-content-contain")[0].style.backgroundImage = "url('https://www.biomotive.com.hk/wp-content/uploads/bg-images/Ediblebg.jpg')";};

Now I will see how to speed up load (or preload), because works, but too slow (0.8s per each change).
Ciao Joy
Mauro