I have been asked a few times how to set images as full screen backgrounds in WordPress.
In this tutorial I will share 3 plugins as well as alternative methods for doing this using CSS.
Plug-ins (no coding necessary)
The following 3 WordPress plugins can help you achieve a full screen, resizable, rescalable background image:
1. Simple Full Screen Background Image
Exactly what it says. A simple way to upload images and set them as full screen backgrounds.
I will show you the back-end of this plugin in the video below.
I was not able to test this because the version of PHP running on our test site is not the required version.
It has good reviews and after reading about it I want to try it out. (Which is why I kept it on this list.)
This allows you to set a slideshow as a full screen, resizable background.
The functionality of this plugin goes above and beyond what I expected. It is easy to customize and it really adds a visual spark to your website.
You can even specify specific pages where the background images will appear.
This plugin is demonstrated in the video below.
Without plugins (coding necessary)
It is also possible to create full screen background images using CSS. There is also a method using jQuery.
This tutorial from CSS Tricks will show you how to execute both techniques.
What size images?
Considering there are many variations in screen sizes, there is no standard for website background images.
You obviously want high quality images so they are not pixelated or distorted when stretched to fill large screen sizes, but you also want the image’s file size to be as small as possible to optimize load times.
Your parents might still be using a 800 x 600 resolution while all your peers use laptops with 1440 x 900 resolutions. 1920 x 1200 is the largest I have been able to find in statistic reports.
Here is a nice table breaking down screen resolutions (by % of users) for the past 3 years. 1366 x 768 is currently the most popular.
You also have to worry about people surfing the web from mobile devices. It is being predicted that by 2015 more people will be using the Internet with mobile devices than those accessing it from desktop computers. Mobile cannot be ignored.
My recommendation is to use images with a width of 1440 pixels.
This way you guarantee the majority of people see a quality image as the background.
The small percentage of people using larger resolutions are not worth the extra bandwidth and load time.
But then again, that’s just me.