If you’re a webdeveloper or designer I am pretty sure you’ve run into the problem of people wanting to have “fullscreen content” or just background images that will stretch in the most optimal way to the users screen.
Lately I found that a lot of people are asking for fullscreen backgrounds, videos and other types on stuff. So to prevent myself from reinventing the wheel over and over again I made a small jQuery plugin, and thought you guys might like it too.
So here it is: Fullscreen Background for jQuery.
How to use.
And using it is so easy; anyone can do it!
Oh, and it works in every browser I could test it in. (IE7 and higher, Firefox, Opera, Safari and Chrome)
Here’s a short step by step installation guide:
- Put the following code in the <head> section of your webpage:
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.fullscreenBackground.js"></script> - Have the following structure in your HTML (or something similar):
<div class="content"> Content goes here </div> <div id="background-image"> <img src="path/to/img.jpg" alt="" width="800" height="600" /> </div> - Remember to define the width and height of the images! This is important.
- Then, in your CSS. Make sure the content (not the background image container) is absolute and has a higher z-index than 1.
- Finally add this in a piece of Javascript, preferably in $(document).ready();
$("#background-image").fullscreenBackground();
Documentation:
Fullscreen Background: Options
The plugin allows a few settings to give to the function:
| options | |
|---|---|
| string selector | The selector that will be used when digging through the element you’re calling the function on. Default: "img" |
| bool fillOnResize | Set to true if the image has to resize to the screen if the screensize changes. I think most will leave this set to true. Default: true |
| bool defaultCss | Set to true if you want to add some standard CSS to the elements. If you are experiencing problems you can set this to false and do the CSS in your own stylesheet. Default: true |
Conclusion:
Quick and easy: it really does the trick here.
Absolutely no rocket science, but it will prevent you from coding it again in the future.
Let me know what you think!
Thanks for sharing. We are looking around for an easier way to do a fullscreen background. By the way, the artwork you use in your example is beautiful. Who’s the artist?
Hi, thank you for sharing this useful plugin, Could you explain me please, how to center the div with the text? I mean, i want it to be placed exactly in the middle even if the resolution changes…
thank you for the help
Tony
@Orgnix: I don’t know. Stumbled on it a while back. Love it too :) thanks.
@Tony: You can position the div in Javascript.
Thank you for your great work. I would like to use this at work. What is license?
Good method to do this and the artwork used in the example is stunning.
Been looking for a lightweight version of the supersized plugin that is strictly just for a background image found lots but they were all dated back to 2010-2011, glad I stumbled across this its going to work perfect!
hi!
This is really great plugin :) big thx!
I have one problem though..
i think its my css that is the problem, but anyway, il have to ask you..
This should work fine on mobile devices such as iphone right? :)
About 145px of my image cuts off from the top. I noticed it does the same thing on your example too. Is there anyway to properly display my image from the top and left?
Pretty good, but it would be better if the image would fade in once loaded instead of revealing itself as it loads.
Great work! It would be fantastic if the image could be loaded from a CSS element instead of from the HTML markup.
Good work bro..so simple and easy to use. Please work around on it to make a simple background slideshow.
The image used in the demo is amazing..really great
I’ve got to say, I love this. It was easy to use and works great! I have one question though, is there a way to use this for dynamically resizing a php file? My header is php and I’d like for it to resize along with the background for different screen resolutions.
Great plug in – Thank you.
Tip: if you do not want to see the scrolling bars when your content is not long enough just have a reset css in your code – that will fix it. :)
oh by the way you can use position:relative; as well instead of absolute for your content blocks.
header, #content, footer {z-index:2;position: relative;display:block;}
Will this also work for video? Like the video tag in html5?
Some more info:
I want to have a background video, but it should be full screen and resize when you make your browser smaller/bigger (html5 video tag I use).
@Yess!: This script works with different types of tags. Try this: $(element).fullscreenBackground({ selector: “video” });
Great script! I need my image to anchor on the top right corner, the script by default anchors it with the top left. I’m not very familiar with JS, so how would I modify it so that when the window shrinks, the top right of the image is still in the viewport? Thanks
Great little piece of work, i need to ask you if it’s posibile to have more than one background like this on a page to resize like that, i mean to have two div one on top of either. Thanks in advance
I have the same problem. Im using this plugin with jquery cycle and only current image is being resized. Is there a workaround?
Me too have the same problem. I’ve done a page with a long scroll and I have backgroundimages in a couple of div’s that I want to be resized when window is resized.
thank for your code :D, it nice.
hi can i set the animation to fadein fadeout ?? please help