Background Patterns and Textures | Jane B. Website Help

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 example.

Colour Gradients

These can look appealing.

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.

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.

There are many sources of paper effect backgrounds including:

Various Paper Patterns from Subtle Patterns at Toptal
Seamless Rice Paper from Media Loot
Subtle Paper from Pixeden
Digital Paper Textures by Co-op Goods Co at Creative Market
Seamless Paper Textures by Dezajno at the Hungry Jpeg

The example below is Rice Paper 2 by Atle Mo – one of the free Subtle Patterns.

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.

More Suggestions

Where to Find Free Website Graphics

When you are building a website, you are likely to want to add some illustrations to make it look appealing to your visitors. It’s reasonable to expect to have to pay for website graphics as these have been created through the hard work of artists and designers. Having said that, costs can easily mount up and, like most people, I love a freebie or a bargain! Here are some of my favourite sources of free graphics that can be used on websites.

My previous post, Where to Find Free Website Graphics, listed some of my favourite websites for downloading free images, backgrounds and other graphical resources. This follow up post contains a few more suggested sources of freebies. These ones are perhaps a little less well known and may not have such a great selection – but they are worth a look.