Sometimes creating a background for a website is easy because the website’s subject matter, as in the case of a knitting site, offers plenty of background images for tiling. But other times, after several rejected proposals, one can start pulling an already thin crop of hair. But not any more thanks to SiteOrigin’s Background Generator. This is a free online Background Generator which allows one to work with the client in producing the background they want.
Typically, one produces 2-3 backgrounds each with a design motif. And if the client accepts one, you don’t need to read any further. But if the background designs are rejected, offer to let the client create their own background with a live full screen, easy to use generator tool:
- Background Color – use the color picker or enter a swatch-color’s hex code
- Pattern – choose from 2 dozen patterns, start at the bottom for the most interesting patterns
- Blend Mode – again start at the bottom and move up
- Pattern Intensity – works like the Curves tool in Photoshop but subject to abrupt changes with some Blend Modes
- Noise – does that introducing “blurring” noise into the pattern
- Invert Pattern – reverses the colors and can introduce surprising changes
- Generate @2X – zooms the pattern by a factor of 2. Again this is quite useful to emphasize or smooth out a pattern
In the bottom left there is a download button which allows you to save the pattern in a .png file whose size depends on the complexity of the pattern. Having used Background Image Generator scores of times, I have yet to produce a pattern that failed to tile with x-repeat, y-repeat, or repeat. However, from time to time I have produced a pattern which has obtrusive grid lines. The usual solution is to increase the Noise control or change the Blend Mode.
Some Sample Background Patterns Generated
Speaking of Blend Mode, in the group of patterns shown in the slider below there are two blend patterns which have used Pixlr.com to blend a SiteOrigin pattern with a layer image that is too strong. See the KnitDesign pattern.
[cycloneslider id=”bgpats”]
You are welcome to download and use any of the above patterns.
And of course the CSS is straight forward: body { background-image: url(“bluepaper.png”); }
Insert this in your CSS file.
Summary
Greg Priday and crew at SiteOrigin are churning out outstanding free code of late. See for example reviews on their WordPress CSS Editor or their robust WordPress Page/Post Builder. Background Image Generator is the first product that is more broadly useful in Web Design and Development as I have used it for JavaScript SPA-Single Page Apps. Hopefully, this is not the last