Scalable background image with jQuery


When a customer wants a background image for his/her website, there are always some questions to answer:

  • For which resolution will it be optimized
  • How big shall it be
  • Which background color has to be taken when the browser size is bigger than the background image
  • Does the background color fit to each background image

There is 1 answer for all these questions: Supersized.

Supersized is a fullscreen background and slideshow jQuery plugin that takes the reference image and scales it to the browser size. Supersized generates from a single image a scalable background or from multiple images a background slideshow.

Include first the stylesheet, then the javascript file. If only a scalable image is needed, then you should use the supersized core javascript file (stripped down version). When a slideshow is needed, then the normal javascript file should be included.

Example script for a single scalable image with Supersized:

   //Background image
       slides  :  [{ image : ''}]            

Example script for a multi image scalable slideshow with Supersized:

	jQuery.fn.supersized.options = {  
		startwidth: 1920,  
		startheight: 1080,
		vertical_center: 0,
		slideshow: 1,
		navigation: 0,
		thumbnail_navigation: 0,
		transition: 1, 
		pause_hover: 0,
		slide_counter: 1,
		slide_captions: 0,
		slide_interval: 10000,
		slides : [{image : ''},
{image : ''},
{image : ''}]


Noch keine Bewertungen.
Bitte warten...


    Hinterlasse einen Fingerabdruck für die Ewigkeit: Ein Kommentar bei LimeSoda!

    (*) Pflichtfeld

    Bewirb dich bei uns!

    Digitalagentur in Wien.

    Bewirb dich jetzt!

    Verpasse nicht den nächsten Blog-Post von Marcel!

    Jetzt zum LimeSoda-Newsletter anmelden