How To Make Background Images And Patterns

Free Background Images

Everyone loves background images and patterns. They can really spice up a website's design. That's why we included a whole library of free background images you can use. Doodlekit offers hundreds of images and background patterns who's colors you can adjust to match your website's color scheme.

Accessing these are easy. Login to your Doodlekit website and then go to:

Admin Tool --> Templates --> Advanced Design Tools

Background images for websites are broken up into different sections. Each major section can have its own background patterns and images with their own unique colors. The five sections whose backgrounds you can adjust are: body, header, page, footer bar and footer. Pick one of these to get started. For demonstration purposes I will pick the header. Below is an example of what you might see when you select the header tab.

Free Background Patterns

The selected background image should be showing, as well as the selected shade of color for it. By default, all 'preview' images of background images and patterns are in black and white. The actual image used on your website will be colored the shade you have selected.

You can change the background image or pattern used by clicking on the 'Change' button. This will pop up a dialog box showing Doodlekit's background library of patterns and images for you to select from.

Background Images For Websites

For the purposes of this tutorial, we will keep the 'wood boards' pattern. After you select your image and color, you can click on the 'Advanced' link to see Advanced Header Bar Options. You will see two color options there: 'White Color' and 'Black Color'. These are auto calculated for you when you pick what shade color you want your background image to be. Here you can override those auto calculations and replace all 'white' parts of the background image with one color, and all the 'black' parts with another. Grey colors will be a blend of the two colors picked.

Background Patterns For Websites

Lets change the color of the 'wood boards' to a darker brown. To do this go back to the Header Bar and pick a darker background color like the one shown below.

Background Images

Now save. Go back to your website and click refresh. Your header background image color should change to your newly selected background color. In our case, the background image went from this:

Background Patterns

To this:

Backgrounds For Websites

Pretty neat, right? Now lets have some more fun - lets change the background image. Just click on the 'Change' button and pick a new background pattern. For this tutorial we will pick the background image of trees.

Make Background Images

Once selected, they new pattern will show as the background image in your admin tool. Click 'Save' and refresh your website.

Make Background Patterns

The new pattern should show up now as your background like the image below, using the new background colors you picked earlier.

Images And Patterns

That's it! Now you know how to make background images for your website! This is a really neat feature of Doodlekit. You can spend hours just playing around with all the free background patterns we have. It gets really crazy when you start using different patterns on different sections of your website or adding transparencies to your overlaying content.

Enjoy Doodlekit's free background images for your website! Good luck and, as always, have fun!

Have more questions? Submit a request


Powered by Zendesk