JavaScript Document mozSetImageElement() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word MOZSETIMAGEELEMENT

Definition

document.mozSetImageElement(imageElementId, imageElement) tells Firefox which DOM element to use as the live CSS background for a given -moz-element(#id) background ID (MDN). Pass null to clear that override. Returns undefined.

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call document.mozSetImageElement. Start with this line.

JavaScript
document.mozSetImageElement(id, element)
CallWhat it does
document.mozSetImageElement(id, element)Primary signature.
document.mozSetImageElement(...)Call with the arguments your case needs.

Built into the browser. Call mozSetImageElement(...) on document — no import required.

Library declarations
JavaScript
document.mozSetImageElement(id, element)

Parameters

ParameterDescription
imageElementIdRequired. String ID matching -moz-element(#…)
imageElementRequired. Element to use, or null to remove

Return Value

Return ValueDescription
*undefined

JavaScript Examples

Example 1 — Feature-Detect First

Non-standard APIs must be checked before every call.

JavaScript
if (typeof document.mozSetImageElement === "function") {
  console.log("mozSetImageElement available (likely Firefox)");
} else {
  console.log("unsupported — use standard CSS backgrounds");
}
Try It Yourself

How It Works

  1. Test for a function. Avoids a TypeError outside Firefox.
  2. Branch. Supported → you may call the API; missing → use standard CSS.
  3. Literacy goal. Recognize the name if you see it in old Firefox code.
  4. Production rule. Do not ship features that require this method.

Example 2 — Register a Canvas (MDN Pattern)

Create a small canvas and point an ID at it when the API exists.

JavaScript
function setCanvasBg(id, red) {
  if (typeof document.mozSetImageElement !== "function") {
    return "unsupported";
  }
  const canvas = document.createElement("canvas");
  canvas.width = 100;
  canvas.height = 100;
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = "#" + red.toString(16).padStart(2, "0") + "0000";
  ctx.fillRect(25, 25, 50, 50);
  document.mozSetImageElement(id, canvas);
  return "set";
}

console.log(setCanvasBg("canvas-bg", 0x88));
Try It Yourself

How It Works

  1. Guard the call. Exit early when the method is missing.
  2. Draw a canvas. Same idea as the MDN click demo (colored square).
  3. Register by ID. That ID should match -moz-element(#…) in Firefox CSS.
  4. Return a status string. Easy to log in demos without relying on a visual box.

Example 3 — Clear with null

MDN: pass null to remove the background element for that ID.

JavaScript
function clearBg(id) {
  if (typeof document.mozSetImageElement !== "function") {
    return "unsupported";
  }
  document.mozSetImageElement(id, null);
  return "cleared";
}

console.log(clearBg("canvas-bg"));
Try It Yourself

How It Works

  1. Detect again. Same guard as set.
  2. Pass null. MDN: removes the background element override.
  3. ID must match. Clear the same string you used when setting.
  4. No return value. The method itself returns undefined; we return a demo label.
Compatibility

Browser Support

Document.mozSetImageElement() is Non-standard on MDN and works in Firefox (4+). Other major engines do not implement it. See the MDN mozSetImageElement() reference.

✓ Non-standard · Firefox

Document.mozSetImageElement()

Firefox-only override for -moz-element() CSS backgrounds. Feature-detect; never require it for product UX.

Firefox Non-standard
Mozilla Firefox 4+
Yes
Google Chrome Not supported
No
Microsoft Edge Not supported
No
Apple Safari Not supported
No
Opera Not supported
No
Internet Explorer Not supported
No
mozSetImageElement() Firefox only

Bottom line: Literacy / legacy Firefox demos only. Prefer standard CSS and canvas APIs for real apps.

Frequently Asked Questions

It changes the element used as the CSS background for a background that references a given background element ID via the -moz-element() CSS function (MDN).
MDN marks it Non-standard. It is not part of any specification. It is not marked Deprecated or Experimental on MDN, but you should not depend on it in production.
Firefox only (from Firefox 4+). Chrome, Safari, Edge, Opera, and IE do not support it.
None (undefined) (MDN).
Pass null as imageElement to remove the background element override for that ID (MDN).
Prefer standard CSS backgrounds: url(), gradients, canvas.toDataURL() / drawImage, or SVG patterns. Avoid depending on -moz-element() and mozSetImageElement() for cross-browser apps.

Next: open()

Learn how document.open() starts a stream for document.write().

open() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

JavaScript Document moveBefore() Method JavaScript Document open() Method