A website background is a key ingredient in modern web design. It is used to frame content and provide visual separation for the site’s sections. Backgrounds have also been known to set the tone for the website and influence the user’s first impression. This is why the choice of color or visual for this part of the site should not be taken lightly. Your selection can make or break your ability to communicate your site’s message effectively.
Here are some of the best practices you should remember when selecting free website backgrounds for your site.
Website background options
With Strikingly’s web editor, you have a choice between three background options: a block color background, image and video. A color background is easier to match with your brand so that the focus is more on the site content. Using an image background is very typical in modern web design. You can invoke certain emotions by using a good quality website background image. Meanwhile, using a video background encourages user engagement. It can supplement the content by its ability to tell visitors what your site is about within a limited span of time.
Accessibility is important
Even if you use image or video background, website accessibility should not suffer. Make sure your choice of background does not take away focus from the site’s text content or make it difficult to read the text over it. You should apply an acceptable contrast ratio so that your text doesn’t blend in with the image.
To resolve readability issues on free website backgrounds, you can use an image editor to adjust the photo’s contrast and opacity. Make sure to choose the right font and font size for the text so it still jumps out of the image. Overall, you must adjust your background so that it doesn’t interfere with your user’s ability to read your content.
Use relevant and uncluttered images
You should always consider your website background as part of your overall branding strategy. This means that the image or video you choose should be able to communicate your website’s message effectively. Choose a photo that is related to your brand. It can be an image of your office or physical location, or that of your product or service.
It’s also important to use a photo that has a lot of open space for your text. Something too cluttered could distract your visitor from the content. Avoid overwhelming images for site backgrounds.
Alternatively, you can also go for a solid color background to give your website a cleaner look. This is particularly important for text-heavy pages where an image may distract the reader from your message. Learn more about different website background options here.
Test on multiple devices and screen sizes
The visible area of free website backgrounds differs across different screen sizes. What looks good on a widescreen computer may look bad when viewed using a phone. Some parts of your message may get cut off. Use images that fit the recommended aspect ratio of the site’s parent container - portrait, landscape, square. Most website builders such as Strikingly, are intuitive enough to make adjustments to the photo relevant to screen sizes but at the very least, make sure to follow their guidelines on image sizes to make it easier for the platform.
Image quality matters
It’s also a good idea to use high-quality website backgrounds. You can just crop the image down to size according to the specifications of your website builder. Starting with a low-resolution image can result in pixelated visuals especially when viewed on larger screens. Always go for the highest-resolution image you can get because it’s easier to scale down than up.
If you’re cropping your images yourself, make sure to crop to the highest width that you will need for the site. Strikingly’s background images, for instance, are 1600 pixels wide and 900 pixels tall. Check out our guidelines for using website background images here.