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. A website background has been known to set the tone for the website and influence the user’s first impression. This is why the choice of color or visuals 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. It can either make you and your brand look more professional, or it can hurt your chances for engagement and opportunities by making you look like an amateur.
Before wondering how to make a website background work well, here are some advice and practices we prepared for you when selecting the best website background images, videos, or website background colors.
1. Know Your Options
With Strikingly’s web editor, you have a choice between three background options:
- a block color background
- an image
- a video.
Pro tip: An optimized full section Strikingly background image size is 1600 x 900 px.
A background color for websites is easier to match with your brand so that the focus is more on the site content. Certain colors evoke certain emotions. The simplicity of a single color can bring a level of professionality to your website.
Having an image as a website background is very typical in modern web design. Usually, this image background is placed on the landing page to invoke certain reactions - especially if a good quality website background is selected.
Lastly, using a video as a website 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. If done really well, it presents a very high level of professionality and modernism.
Any of these options can be good if done right. Keep reading to know how to make sure your choice best suits your brand.
2. Readability and Quality
When you use an image or a video for your website background, accessibility and readability should not be affected negatively. While it is almost a requirement to only use high quality images or videos, one of the most common errors beginner website developers make is picking any high quality images or videos mostly based on website background size or resolution without taking into account the colors and contrast ratios.
The best website background images don't necessarily mean the ones with the highest quality. You have to make sure the image integrates well with your title and whatever text you have over it. It should not take away focus from the main context of your website by making texts difficult to read. Choosing images with a good contrast ratio makes it easier to put text and titles over it so the text won’t blend in with the image.
What is a “contrast ratio”? To make things simpler, it’s easily the ratio or relation of the brightest part of an image to the darkest part of the same image. A good contrast ratio for readability means the brightest and darkest parts are not too far apart.
For example, if you are planning to make a vegan/vegetarian food blog, you might immediately select well-shot images like this as your website background:
However, the bright spots on the bowls, tables, and light-colored vegetables are in too much contrast with the black containers, the shadows, and the olives. This makes it difficult to select a font color for a big title that goes over the image. Selecting white or black as the text color would be hard, and selecting colored choices would still be a problem with the amount of varying colors in the image.
Having a more consistent color scheme with a more muted contrast ratio would help a lot. The image below is mostly greens and browns, being on the dark side and having no bright spots of white. Putting a title on the middle with white as the font color would work wonders.
However, if you want to use a colorful image, there are ways to resolve readability issues. 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.
3. Brand Relevance
You should always consider your website background as part of your overall branding strategy. If you opt for a solid background color, it should always complement the other elements in your website to really present your branding the best way you can. However, when you opt to use images or videos, you should be able to communicate your website’s message effectively. Choose an image or a video that is related and relevant to your brand. It can be an image of your office or physical location, or that of your product or service.
If you want to make a website for your architecture firm, using a very nice image of your office building can work well. If you are a graphic artist, using a very well-spaced graphic art of yours will also represent your brand properly. The best website background images will greatly affect the level of professionalism for your website..
4. Simplicity is Key
In modern design, most of the time it’s important to use photos that have a lot of open space for titles and any other text boxes. Something too cluttered could distract your visitor from the content. Images that are too busy might also bring you the issue about contrast ratios as discussed above. Try to avoid overwhelming images for website backgrounds.
Minimal shot of an office building
Image taken from Strikingly User’s Website
Alternatively, you can also go for a solid color website 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 hence having solid background colors for website readability can be more beneficial than busy images or videos. Learn more about different website background options here.
5. Multiple Device Support and Resolution Quality
We are currently in an era where almost everyone uses more than one device. We use mobile phones, personal computers, laptops, and tablets to browse the web. These different devices have different screen sizes, resolutions, and even orientations.
The visible area of website backgrounds differs across the different screen sizes. What looks good on a widescreen computer may look bad when viewed using a mobile phone, and vice versa. In some cases, parts of your message may even get cut off. To avoid these issues, use images that fit the recommended aspect ratio of the site’s parent container for all orientations - portrait, landscape, and square. Most website builders such as Strikingly are intuitive enough to make adjustments to the photo relevant to screen sizes according to the different devices. However,it is crucial to follow their guidelines on image sizes to make it easier for the platform.
When thinking of which image to use, it is important to be familiar with the kind of aspect ratios and resolutions common devices use. In most cases, laptops and computers use a screen with a resolution of 1920 x 1080 pixels in a 16 by 9 aspect ratio. A mobile phone however uses a taller portrait aspect ratio, usually around 9 x 18, and will have a higher resolution of 2500 x 1100 pixels. This means that you need to be careful when selecting images that are barely full HD (1920 x 1080). It is important to know how to optimize your website for mobile phones.
Always use good, high quality website backgrounds so that when website builders crop and adjust the image according to the device, the image would retain a very high-quality look and feel to it. If you’re doing it manually, you can just crop the image down to size according to the specifications of your website builder for each common device. When cropping, 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. Always take into account that while the more common devices use Full HD or 1920 x 1080, there are also a lot of devices that have moved up to 4K category. This means your low-resolution images can look even more pixelated in these larger screens.
Strikingly’s website background size and resolution for instance is 1600 by 900 pixels. Check out our guidelines for using website background images here.
No matter what your choice for website backgrounds is, what’s the most important is consistency with your brand and your message. The choice for the best website background images will always be different depending on your needs, may it be an art portfolio, a photography blog, or just a personal everyday blog. Choose the images that speak to you and about you the most.
Try checking out inspirational blog templates or the top web designs trends of 2020 to help you decide on what you should do with your website.
