Background Patterns and Textures

Using a photo, pattern or texture as a background on sections of your website can add interest and help your site to appear attractive and memorable.

You should take into account your site’s audience and consider adding only subtle decorative touches. It’s also important to make sure that any images you include are not so large that they will significantly increase the loading time of your site.

Here are a few suggestions of ways in which you could use background images.

Photographs

A large background photo, like this one by valiunic at Pixabay can be effective, but it won’t work for every type of website and you need to be extra careful with the size of the image, to ensure it doesn’t slow down the loading time of the site too much.

example of website with photo background

You may prefer to use a background image for a smaller section, rather than for the whole site, as with this wave from NeuPaddy (also a free image from Pixabay). I’ve added a colour overlay to this particular example before uploading it to the website.

Colour Gradients

These can look appealing if used thoughtfully, although if used in the wrong place there’s a danger of them seeming dated or unprofessional.

Realistic Textures

As always, you need to think about the type of image you are trying to create – texture effects may be appropriate for a site focusing on handicrafts, fashion, cookery, pets or children but may not appear professional for an accountant or technology website.

Here’s an example using a free seamless brick effect background from Pixeden.

example of brick website background

You can also find textures giving the appearance of marble, watercolour paintings, fabric, gold, wood, paper etc.

As mentioned above, you don’t need to use images just for the background of your entire website. It may be more effective to add backgrounds to the header, menu bar, footer, buttons, sections or panels.

This marble texture, shown as the footer background, is from Laras Wonderland.

 

This watercolour header background is by Julia Dreams.

 

The seamless fabric background, used below for the footer widget area’s background image, is a free texture from Fuzzimo.

The button below has both a gold image as the background and a groove border.

I’ve listed several sources of paper effect backgrounds here on my demo site for the Doodled website style.

Seamless Patterns

A seamless pattern is ideal for use on a website because the size of each individual file is small, but it can be tiled to fill large areas.

These patterns are readily available online in just about every style of design imaginable.

Here’s an example of a watercolour flower pattern from Julia Dreams.


Use of Background Images on Websites I Build

In general, if I build a website for you, then the cost of providing images is not included, and I don’t undertake to carry out the time consuming process of searching for the perfect image for you to purchase.

However, I do have a stock of graphical resources that I’ve built up over the years. Some of these are free, and I’ll be able to tell you where you can find them. Usually, although I may be able to suggest an image from my collection, licensing rules mean that you’ll need to buy your own copy if you want me to use it.  In most cases, this wouldn’t cost more than a few pounds.

If any of the images I’ve displayed on the pages or blog posts of this site appeal to you, then let me know and I can probably point you towards a source where you can purchase them.