Author’s Note
I have written a more recent article about using background images and videos in a mobile oriented web environment.
Original Article About Using Background Images and Videos in a Mobile Oriented Web Environment
If you’ve ever dabbled with CSS, you probably already know that there is a built in background image feature that allows you to mount a background image to any site. But if you’ve ever tried to actually mount a background image then you know that mounting a background image is a lot more complicated than just picking the right background image.
The Problems with Images and Videos in a Mobile Environment:
Text
If you want to use a background image then you need to create text that is readable over your background. This isn’t simple or obvious. Your text might be readable over part of your image but not over other parts of your image.
File Size
File sizes can have a significant impact on how quickly your site can be downloaded. And file size can impact if your images and videos work properly once your site has been downloaded onto your browser. With images, you can usually find something modest in size, but with videos, you have to be more particular. The bottom line is even if you have a high performing server, you may have to make compromises on what gets downloaded onto different devices.
Mobile Compatibility
You may have a great looking fixed background image that looks awesome on a PC with a horizontally aligned screen. But as soon as soon as you put it in a mobile environment, the image switches size when the address bar shows and retracts or the fixed feature may be turned off completely.
The Solution for Using Images and Videos in a Mobile Environment
Creating background images and videos that perform well across all major browsing platforms is difficult. It is so difficult that you rarely see it performed without significant compromises. Creating a generalized algorithm that handles very unique and specific situations of such significant disparity is not intuitive. So most web developers will throw their hands up and declare that it is simply not worth the effort.
If you want to embark on this task, you’re going to need spend a lot of time learning how browsers define specific data in different ways. And you’re going to need to use some algebra and geometry to define different screen sizes.
The good news is that if you don’t want to deal with all of that, I’ve created a template that already does all of that for you. It is a WordPress theme called Big Bob and you can download it for free right here.
If you’re already familiar with WordPress, then you should find that adding images is pretty intuitive. If you want to add a background image to a page or post, just add a new featured image and the Big Bob theme will take care of the rest. Adding a video is slightly trickier. But I have added a full set of instructions and a full list of features here.