View Background Image in Opera/Chrome/IE with a javascript bookmarklet

Create a new book mark (preferably on your bookmarks bar or) wherever you choose within easy access, and then select and paste in all of this code as the URL/address:

javascript:var backup=document.body.onclick;void(document.body.onclick=function(event){var bodyStyle=window.getComputedStyle(document.body,null).getPropertyValue(‘background-image’);var bgStyle=window.getComputedStyle(event.target,null).getPropertyValue(‘background-image’);if(bgStyle!=’none’)window.open(bgStyle.replace(/url\(“?/,”).replace(/”?\)$/,”));else if(bodyStyle!=’none’)window.open(bodyStyle.replace(/url\(“?/,”).replace(/”?\)$/,”));document.body.onclick=backup;backup=undefined;});

To view any web page’s background image, first click on the bookmark then click on the background image you wish to view.

It should work, amazingly well, if the page does have a background image!

Got it set up in IE9, Chrome18, Opera11, no probs

These steps are not necessary in Mozilla’s Firefox browser, which already has an in-built “View Background Image” option on its right-click context menu.

But this just saves the hassle of having to copy a URL from Chrome/Opera/IE into Firefox just to view a background image.

Tip of the hat to MyOpera for the tip.

Advertisements

2 thoughts on “View Background Image in Opera/Chrome/IE with a javascript bookmarklet

  1. I copied the code exactly and it failed every time.

    javascript:var backup=document.body.onclick;void(document.body.onclick=function(event){var bodyStyle=window.getComputedStyle(document.body,null).getPropertyValue(‘background-image’);var bgStyle=window.getComputedStyle(event.target,null).getPropertyValue(‘background-image’);if(bgStyle!=’none’)window.open(bgStyle.replace(/url\(“?/,”).replace(/”?\)$/,”));else if(bodyStyle!=’none’)window.open(bodyStyle.replace(/url\(“?/,”).replace(/”?\)$/,”));document.body.onclick=backup;backup=undefined;});

    Any Idea why?

    1. Sorry for delay in responding… Not sure why it keeps failing for you!? 🤔
      I have it working in Chrome, Firefox & Opera; I suspect it doesn’t work in newer IE browsers!

      Are you sure you are:
      1). Clicking on the ‘View bg img’ bookmark, (or whatever name you assigned to it),
      2). and then clicking on the background image you wish to view,
      3). the image should then load in a new window.

      It may not work on every website (some sites like to prevent viewing their background images, e.g. twitter, etc.) try it on different web sites to be sure

      Work-around Notes:
      a) Firefox has a ‘View Background Image’ anyway when you right-click on a web-page bg image
      b) Also IE9 has a ‘Save background as’ option when you right-click too

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s