Intro.

All bloggers and website owners are constantly on the lookout for the perfect background images to suit the purpose they are after. The problem in the past has been that the majority of these images have been stock photo’s, and you have to pay for them. You had to go to somewhere like Shutterstock to purchase them. What if I could tell you that there are now multiple places where you can find “FREE website background images” that are just as good as stock photos.

You may be thinking that I’m pulling your leg, and that when you actually visit these websites, there’s a few images available but most will cost you. Not so. All these websites I’m going to share with you are offering free website background images that you can use, some with attribution, some without. I’m not taking about using Google images either, which can be against copyright laws.

Here’s the types of background topics I’ll cover:

• Pattern Background Images
• Color Block Backgrounds
• Photo Background Images
• Animation Background Choices
• Abstract Image Backgrounds
• The JPG or PNG Dilema

Whilst we’re alluding to background images, many, if not most of these sites display all types of free images that you can freely use. But firstly, which are the best types of backgrounds for your website?

Types of Background Image

Pattern Background Images

Adopting a pattern background to your website design can work very well, but you must be aware of a few points. Integrating the right pattern with the correct design can trigger emotions to help visitors stay on your website longer. And we all know this can help with SEO.

But not every pattern works and some backgrounds with a pattern can look too busy. The other problem with this comes when adding text, the content can get lost. Headers can also be hard to read, with many patterned backgrounds, proving you need the right decorative markings to suit the right design. You must also keep in mind that this is a background image, so you don’t want it being the focus of the page.

The bolder the pattern, the more it may take away from the main design. It’s possible to create you own pattern background image. If you decide to do this, then try to keep the pattern repetitive and symmetrical. This way it will work well if the image scales up or down. So, where can you find free background pattern images?

Subtle Patterns

Sanwebe

The Pattern Library

Texture King

Texture mate

Background labs

Color Block Backgrounds

Using a single block of colour as a background can also work extremely well given the right circumstances. But on the flipside, if you get it wrong, they can look appalling. It’s all about contrast and minimalism. Obviously using a single colour is the easiest to implement, but you may prefer blocks of colour that vary as your website descends. This can usually be done in the website theme you’re using and Divi theme gives you great flexibility with this. If you’re really thinking about single or multiple blocks of colour, pastels seem to work better as the bold colours can be too ‘in your face’. Adding colourful text to bold backgrounds can contrast very badly, so stick to white text when doing this. Otherwise, spend time getting the contrast perfect.

Photo Background Images

A great choice for background images but they must be used well. You must think ahead of choosing your background photo image, how exactly it’s going to tie in with any text. You must think of the text foreground and the photo background as one, and therefore don’t just get a nice image that that suits the topic.

You must consider where any heading text will appear on the photo background. You probably don’t want text floating over a face, especially the eyes. Often, in fact in most cases, it’s best to screen the image with a wash over it. This can either be done to the image itself before uploading or you can use a colour overlay such as in Divi Theme.

 

 

 

This is my preferred option as it gives you more flexibility to change the overlay opacity and tint colour. If you find the text is not quite readable, simply modify the opacity so the photo image is lighter against the heading content.

 

 

 

Here’s a great list of free photography image sites, where you can use the photo’s as you see fit.

Unsplash

Pixabay

PikWizard

At PikWizard, they have over 100,000 completely free images on the site, over 20,000 of those are exclusive to PikWizard. They are also adding new images to their library daily and their ultimate goal is to get to more than 1 million images. They’ve got A LOT of pictures of people, which tend to be rare in free stock photo sites.

Gratisography

SkitterPhoto

And I’ve recently found a new favourite. It’s called…

Kaboompics

Animation Background Choices

Cartoon type animation can also work well as long as you use the same rules as the pattern images, and your characters, trees or other animated objects don’t get lost in headings or text. I find this similar to hero backgrounds which are currently popular. Although hero images are generally used as a header image, they can be used as a background, just like still animations which look good when used in a parallax effect. Animated video’s like the one below can capture your viewers attention and can be downloaded for free.

 

 

 

Animations can work effectively if used well. Let’s say you have a skyline that you’d like to slowly move across the screen. You can add some CSS code to make this happen. Other alternatives to this are JavaScript code or to make it simpler, upload a gif image. Although I’d suggest gif’s are better for individual elements as opposed to a full background image. Here’s some free download websites for animated motion video

 

 

 

IgniteMotion

Motion Backgrounds

Abstract Image Backgrounds

You may want to consider using an abstract image background which can offer a much different aspect to you design. The great thing about abstracts is that they are usually a unique feature which can be modified. There are many places where you can download free abstract images which can then be uploaded to a program such as Photoshop where you can add filters and play around with other aspects.

Or, just upload straight to your website, and add an overlay to the abstract image. In fact Divi theme will give you many variations to alter a background image which you can check out here. The only downside to abstract images and patterned images is that your returning visitors may get bored with this type of background.

New Evolution

Vandelay Design

The JPG or PNG Dilema

It’s a question that always stumps new bloggers when it comes to adding images to their new website, which is the better type of image file to upload? I’m not going to go into too much detail as I’m sure you won’t read it. You just want the correct answer. Every website and designer are different, so this can change for each circumstance, but my view is this. Start out using Jpg image files.

The reason for this, is that they can be compressed to a smaller file size whilst not losing too much detail. The secret to smaller file sizes (which is not really a secret) is to resize your image to the correct size you want it displayed on your website before uploading it. If the image is too large in viewable size, it will also be larger in data size. This will only make your website load more slowly, as it needs to resize your image before displaying it. Here’s the process that each image file should go through.

• Download a jpg file to your PC.
• Resize your image to exact dimensions in pixels that you require it to be displayed.
• Open up a new tab in your browser and type in https://tinypng.com/
• Drag and drop your file into the dotted outline box on their webpage.
• Within a few seconds, your image will have been compressed for you to download, click the download label.
• Upload this image to use on your website.

Png files can also be used in this way but they will not compress to as small a file size. The benefits of .png files is that you can keep transparent backgrounds. For instance, if you have an image of a ball with a transparent background, this image can be placed on a background image and the ball will look like it’s placed within the background. If this ball image is converted to a .jpg, it will lose all transparency and will now have a white surround. Place this image on the same background, and white edging will appear around the ball, making it look silly.

Conclusion

In summing up, jpg files are going to be your go-to image file type to upload onto your website. There will be circumstances where .png files will also suit and you’ll find this out by experimenting. The one thing I need to stress to you though, DO NOT upload images larger than what is required. If you’re building a website as a hobby this may not matter too much. If you’re building a website to make money on the other hand, it will make a huge difference. Keep your images small in size and you’ll have a faster loading website.