Don't forget to ping the SubtlePatterns guy as this takes away a fraction of his pageviews (the site is ad-supported) and piggybacks on his content. I'm sure he wouldn't mind, but it'd be a nice gesture to make.
The bookmarklet tries to load the script and possibly other assets (I didn't check) from an insecure domain. This will cause any sane browser (I'm using Chrome) to block those assets from loading on any site served via https.
I would suggest you serve those assets via https if at all possible.
Is it possible to preload the image before applying the style? The flashes to what I think is the normal bg image and image loading progress thing makes it harder to compare backgrounds.
This rocks! I just added one to (one of) my for-fun side projects here http://quantumrandom.com/ after playing with the bookmarklet. Thanks for sharing this.
Hi! This couldn't have come at a better time as this is something on my ToDo list. However the bookmarklet isn't working on my site. The URL is www.randomdailyness.com. Any insight would be awesome!
SubtlePatterns has been a great resource for me -- especially when I'm trying to turn something around really quick -- and this bookmarklet makes the process of selecting a good background MUCH faster. Thanks so much!
I applaud the work and appreciate what you and the Subtlepatterns guys are doing. Thank you!
I do have a plea to users of some of these backgrounds. Perhaps I am a tinge obsessive compulsive, but the backgrounds that include uneven specks always make me think I have dust on my monitor that I need to wipe off. So when making a selection, might I ask you to choose a regular pattern rather than ones that are intended to look like spotty paper fiber? That is, of course, unless you are a paper products company. :)
Yes, pixel noise can be annoying. But it can be easily removed with a couple of clicks in Photoshop. Even simply resizing the pattern to 50% (some of the patterns are HUGE, and do you really need Retina resolution in your background texture?) will get rid of most pixel noise. Subtle Patterns are licensed under CC-BY-SA, so you can modify them as you see fit. It would be cool if OP's tool had the option to apply a few simple transformations to the patterns, such as CSS background-size.
Looks like a pretty good tool. It's always a lot of effort to try out lots of different backgrounds, going through downloading the .zip archives and putting them into the CSS. This will definitely encourage me to actually experiment!
Just FYI, the "try it now" feature jumps you to the top of the page every time you click on the next/previous buttons. (You might not be handling the click event correctly.) Otherwise, I like it!
Nice work Brad, This is really cool. Now I want to hook something like this up to an A/B testing framework and see if I can improve site metrics simply by swapping out the background. Adding some basic image manipulation (hue, saturation, blur, etc) on top of the patterns would be nice to, as I imagine that how most people use that resource.
I found it less usable than Subtle Patterns - reason is to switch to new background, I have to 'click', where as on Subtle Patterns I can scroll and see more backgrounds (given that it shows me only the rectangle of background instead of full site background).
If there is a way you can make it keyboard friendly, it would be great.
Great stuff, I love SubtlePatterns and use it quite often but usually it takes some time to try several patterns and find the right one, so this bookmarklet surely will come in handy :)
You rock. This is crazy useful for trying out styles on stuff i'm building. I'd echo one of the suggestions here, there needs to be a way to apply to non-body elements.
Feedback and comments welcome :)