Using a large background images or video for a website can easily create a good and memorable impression to your visitors. Large background websites often being used in portfolio and product showcase microsites. So, in this post, we have gathered some useful plugins and tutorials that will guide you to achieve that kind of effects.
With the availability of free javascript plugins, large background image or video websites can be created easily without having to worry how well the image/video scale when user resizes the windows. Some of them even lazy load the background image to make sure content first, then large background.
One thing though, when it comes to large background, we need to be aware of the file size. High quality image will take more bandwidth, here we have a few online image compressors that can come in handy to reduce file size and maintain an acceptable level of image quality.
Javascript Plugin Solutions
While it's possible to achieve it with pure CSS, if you don't want to fiddle with CSS, you can try Javascript solutions which will give you more flexibility and extra features. Extra features such as lazy loading, cross browsers support and video support as well. Here is the list of useful plugins we found that will help you.
- 1. BigVideo.js | Demo This plugin makes it easy to add fit-to-fill background video to websites. It can play silent ambient background video (or series of videos). Or use it as a player to show video playlist. BigVideo.js can also show big background images, which is nice to have for showing big background images for devices that don’t have autoplay for ambient video.
- 2. Supersized | Demo Supersized is a fullscreen background slideshow built using the jQuery library.
- 3. Backstretch | Demo a simple jQuery plugin that allows you to add a dynamically-resized background image to any page. It also makes sure only load the background image once the document are ready to avoid long waiting time for large image size.
- 4. jQuery Anystretch | Demo Anystretch is a jQuery plugin that allows you to add a dynamically-resized background image to any page or block level element. The image will stretch to fit the page/element, and will automatically resize as the window size changes.
- 5. Perfect Full Page Background Image (CSS Solution) A tutorial from the CSS guru Chris Coyeir. He shows us how to CSS3 background-size to create full page background easily. In this tutorial, he uses 4 methods - CSS3, 2 CSS2 solutions and finally, using Javascript/jQuery.
Inspirations
Sp, I guess you would want to know some of the best latest and best examples around the web? Below are a few good examples of full background websites, some of them using full screen images, and some are using full screen video.
- Black Negative
- Creative Exsud
- Oliver Staub
- Tatchies
- Films By Brett Johnson
- Fifty Three
- Minerva
- Book of Beards
- Christian Woo
- Lula Design
- Oxygene
- Quentin Mosimann
Take note of these reminders to create a great website. Let this also inspire you to explore out-of-the-box ideas with your brochure print.
Comments will be moderated and
rel="nofollow"will be added to all links. You can wrap your coding with[code][/code]to make use of built-in syntax highlighter.