Large

Standalone Image Background and Transparency

By LouCypher — Last update Feb 25, 2013 — Installed 1,384 times.

Script Summary: Change standalone image background and show its transparency on Mozilla Firefox. You can change its settings from Firefox context menu. Works on SVG images (see Limitations section below).



Version: 7.7.2

License: GPL

Remotely hosted version

Script homepage

Donate   Flattr this

Compatibility

Firefox 15+ with Greasemonkey 1.0+ or Scriptish 0.1+ (see Limitations section below).

Known issues

  • Context menu not appears if Menu Editor extensions is installed and enabled (see discussion).
    To solve this, upgrade to version 7.7 or above and use User Script Commands in Monkey Menu to configure.
  • Can't stylize SVG images with Scriptish. See Limitations section below.

Screenshots

PNG image

Before
Before 		After
After

SVG image

After
Before 		After
After

Configurations

To change image background settings, right click on the page.

Firefox context menu

Change background color

To change background color, select Change Background Color on context menu
to open color setting dialog.

Color setting dialog with color picker

Please note that the color picker requires JavaScript to be enabled. However,
you can still change background color by entering any valid color value.

If you have NoScript extension, color picker will work if you allow the site
from NoScript menu.

Color setting dialog without color picker

Toggle background patterns

To toggle background patterns, check/uncheck Use Background Patterns on context menu.

Toggle image transparency

To toggle image transparency, check/uncheck Show Image Transparency on context menu.

Limitations

URL schemes

By default, this script will not run on image on local disk. To enable it:

  • Greasemonkey:
    1. Type about:config?filter=fileIsGreaseable in Location Bar and press Enter.
    2. Change extensions.greasemonkey.fileIsGreaseable value to true.

  • Scriptish:
    1. Open Scriptish options.
    2. On Sciptish options dialog, select Advanced tab.
    3. Turn on file protocol (Local files) in Additional protocols.

The script will not run on about: and chrome: schemes (e.g. about:logo, chrome://greasemonkey/skin/icon32.png) with Greasemonkey (see Greaseable schemes). But with Scriptish, you can enable it by repeating step 1 and 2 above, then turn on about protocol and chrome protocol in Additional protocols option.

SVG images

SVG images works with Greasemonkey but not with Scriptish. Context menu to configure background color, however, doesn't work on SVG images.

Version history

  • 7.7 – Fixed some compatibility with Scriptish.
  • 7.6 – Added GM menu command to configure.
  • 7.5 – Added GM menu command to toggle SVG.
  • 7.4 – Changed some texts.
  • 7.3 – Fixed: context menu error on SVG image.
  • 7.2 – Fixed: SVG image not always centered.
  • 7.1
    1. Centered SVG image on page.
    2. Iconic <menuitem>.
  • 7.0 – Works on SVG images (Greasemonkey only).
  • 6.3 – Don't bind JSColor on non-image page.
  • 6.0 – Added color picker from JSColor.
  • 5.0 – Validate color value.
  • 4.1 – Fixed: image transparency lost when zoom/unzoom image.
  • 4.0 – Added 'Show Image Transparency' menuitem.
  • 3.4 – Using @resource for menu.
  • 3.3 – Refactored.
  • 3.2 – Dir changes
  • 3.1 – Scriptish compatibility.
  • 3.0 – Background color and patterns are now configurable via context menu.
  • 2.2 – Changed name and description.
  • 2.1 – Configurable color for background checkers in CSS.
  • 2.0 – Using @resource for CSS.
  • 1.0 – Initial release.

--