Skip to content

Instantly share code, notes, and snippets.

@nathanlogan

nathanlogan/Bookmarklet: test CSS build quality with visual design export bg image

Last active August 29, 2015 14:16
Show Gist options
  • Save nathanlogan/f5fb6c59966fcdc9d940 to your computer and use it in GitHub Desktop.
Save nathanlogan/f5fb6c59966fcdc9d940 to your computer and use it in GitHub Desktop.
Download ZIP
In short: visually "diff" your image with your UI. In "not so short": this script takes a user-specified image path as input (any path that works as a CSS background image will do), and sets that as the centered background image of the <html> element. It also applies a 50% opacity to the <body> element, so the background can "shine through". Its…
Raw
Bookmarklet: test CSS build quality with visual design export bg image
<a href="javascript:!function(e){var t=prompt('Please enter a URL for the background image to be applied to the <html> element:','designExport.jpg');null!=t?(e.documentElement.style.background='url('+t+') no-repeat center top',e.body.style.opacity='.5'):e.body.style.opacity='1'}(window.document);">BG IMG CHCKR</a>
@nathanlogan
Copy link
Author

For valid security reasons, Gist won't render this as a preview. If you want to use it, you can see it rendered (and draggable to your bookmarks bar) here:

http://jsfiddle.net/nathanlogan/jkepqL0g/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment