Fullscreen Backgrounds mit jQuery

20. Dezember 2011 / Code / CSS3 / jQuery

---

×Info: This post is older than 2 years! Displayed information may be outdated!

Fullscreen-skalierende Backgrounds sind chic.

1. Supersized

http://buildinternet.com/project/supersized/
Pros: Fullscreen Slideshow
Cons: Komischer Bug auf Chrome, sodass Bilder manchmal erst ab der Hälfte des Viewports ausgerichtet werden: https://github.com/buildinternet/supersized/issues/28

2. Vegas

http://vegas.jaysalvat.com/
Pros: nette Overlay-Effekte
Cons: Bug auf alten Firefoxes (3.6) -> eigene Anpassung des Plugins war notwendig, aber immerhin gelöst: https://github.com/jaysalvat/vegas/issues/8

3. Backstretch

http://srobbin.com/jquery-plugins/backstretch/
Noch nicht getestet.

Update CSS3 (selbst noch nicht getestet):

CSS3 ftw! Das Ganze läßt sich auch ohne jQuery-Plugins umsetzen! Neu sind die Background Properties “size”, “origin” und “clip”. Cool.

body {
    background-attachment: fixed;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("/pfad/zum/bild.jpg");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
}