Fullbleed – Fast and Lightweight Fullscreen Imagery

May 1, 2014 Interactive Design / Development 0

What is Fullbleed?
Fullbleed came as a result of needing to use dead simple fullscreen imagery on a recent project. As we hunted around everything we found had extra features like slideshows and overlay text, none of which we needed and which also made the plugins heavy and hard to implement. So I decided to just take a little time and write one myself to do only what we needed. I know that this has been done a million times before, but this one I can call my own.

To use, you simply create a few different sizes of your background image:


Now, you don’t have to create all of these, just the ones that you are interested in using. The plugin is built so that it will switch to an optimized image size depending on the size of the browser window it is being viewed in. If for example, your project will not support smartphones simply don’t create anything below 1024 or 960. The code will only try and load images that exist, and if it can’t find a matching sized image it will just hold the ones one that was previously loaded. If you don’t care about optimization, and only want to make one image, you can create it without an @size indicator and it will still work just fine. Also, the code looks for more common sizes (1024, 1280) first and then the extreme cases second which helps to speed up the user experience for most users.

How To Use
First, you need to reference the plugin script AFTER your reference to jquery in your pages like you would any other script. Simply call the fullbleed.min.js file.

Then, inside your $(document).ready call, function, or event listener you need to instantiate the plugin and pass it the image that you would like to use like so:


Be sure to pass a full relative path to the image that you want to use including any ../ you may need to traverse to another directory level. You will notice that above, we are making a call to background.jpg. If you created the various sizes mentioned above, the script will automatically handle editing your image path to find the alternate sizes for you.

Lastly, there are a few CSS styles that need to be attached to the element of your page:

width: 100%;
height: 100%;
overflow: hidden;

And that’s it! Pretty easy right?

If you would like to see a copy of it in action, click here.

Before the questions start, I really have no interest in adding functionality to this right now. We just needed a stupid simple way to get fullscreen images to appear and look great. The only thing that I may play with adding is an intelligent pre-loader so that it would load, into memory, only those images that might be used by a device.