In this post I’ll show two simple resources for finding and customizing elegant patterned backgrounds for your website.
Part of coming up with the look of your site is picking colors. In the last post, I shared with you an easy way to create a great looking color pallet for your website.
One of the ways that you can incorporate those colors into your site is by using a simple background image pattern. You can use background images as a simple backdrop for your entire site or to separate different sections of your site by using different backgrounds for each section.
When I did my review of the Divi 2 Theme, I built an entire website so that I could really get to know the theme and its strengths and weaknesses. One of the strengths of the Divi 2 theme is the ability break up different sections of a page with different backgrounds. I found two great resources for creating simple tile-able backgrounds.
The first resource is bg.siteorigin.com. On this site you can easily create nice simple texture or geometric backgrounds. It’s free and easy to use. It also allows you to select a main color that you want to incorporate for your background. You then download a single tile of the background.
At the end of this post I’ll show you how to turn that one tile into an entire seamless background image.
The second site, patterncooler.com has much more intricate and bold patterns. It gives you an easy way to customize the color of each pattern by using the seamless pattern editor. It’s an awesome tool with some great patterns.
Use of the patterns on patterncooler.com seems to be mostly free for small businesses and personal projects, but please be sure to read the terms and conditions before using patterncooler.com.
If your theme allows you to tile images then all you have to do is upload the single tile from one of the sites above.
If you need to insert your background for a section of the Divi 2 theme then here is a quick guide for doing it in photoshop.
I’m not a photoshop expert. I try to avoid using photoshop when possible. For a lot of simple projects I like to use Canva which is an awesome tool. For somethings like this, there aren’t many other better alternatives. This is pretty easy actually.
1. Create a new Document. For use with the full width Divi theme set the width to 1280 and for most applications a height of 400. The height will depend on how much content you plan to put in the section.
2. Once you have your new document open up the downloaded tile that you got from either bg.siteground or patterncooler.com.
3. With the tile open go to Select > All to select the entire tile.
4. With the tile selected Go to Edit > Define Pattern. Give your pattern a name.
5. Go back to the new document you just created.
6. Select the paint bucket tool and choose “pattern” as the fill type from the selector near the top. Next to pattern there is a small square drop down box. Select the pattern that you just created.
7. Use the paint bucket tool to fill your canvas with the new pattern.
And you are done just save the image for your website and you now have a custom background that matches your sites color pallet.
Hi I am a front End Developer Can I use bg.siteorigin background for my customer website? please answer.
Yes, you should be able to.