Member Avatar for fredjahed

Hi All,
When trying to change the bcackgroundImage of element useing javascript method style.backgroundImage="url(blue_link.gif) no errors found but the script can't find the image so what is the correct way to use the address of the image?


Thanks very much in advance,
Fred

  • 3 Contributors
  • 2 Replies
  • 132 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ~s.o.s~

Dani AI

Generated

A short troubleshooting checklist and a couple of practical fixes for the common reasons a background image set from JavaScript fails to appear.

Common causes: the URL is wrong (relative-path confusion or case mismatch on the server), the node’s size/CSS prevents the background from being visible, a later CSS rule (shorthand background) overrides the inline image, or the browser blocks mixed content (HTTP image on an HTTPS page). is right to ask for the directory layout — the actual request URL is the key piece of information. ‘s reminder about forum placement and Java vs JavaScript is noted.

Quick debugging steps:

  • Open DevTools → Network and reload to see the image request and its HTTP status. The requested path printed there shows whether the page is looking in the right place (Chrome DevTools Network).
  • Inspect the element’s computed style to see the final background-image value.
  • Check filename case and any spaces or special characters (use percent-encoding or quotes inside url() if needed). See MDN on background-image for syntax details (background-image property).

Small tests to try (run from a console on the same page to avoid relative-path ambiguity):

var probe = new Image();
probe.onload = function(){ console.log('image loaded'); };
probe.onerror = function(){ console.log('image failed'); };
probe.src = '/images/blue_link.gif';

If the probe loads, set the element’s inline background (use absolute or correctly relative path; inline styles resolve relative to the document, not the JS file or external stylesheet):

el.style.background = "url('/images/blue_link.gif') no-repeat center";

Cautions: clear cache while testing, prefer forward slashes in URLs, and remember external CSS file URLs are resolved relative to the stylesheet, while inline styles (including those applied via JS) are resolved relative to the HTML document.

Recommended Answers

All 2 Replies

Member Avatar for Black Box

For JavaScript questions you should post in the JavaScript forum, a subforum of Web Development.

Java != JavaScript.

Black Box

Member Avatar for ~s.o.s~

Post the proper code along with the directory structure. element.style.backgroundImage = "url(my_image.jpg)"; should work assuming that the image is present in the same directory as the html file.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.