CSS triky 5: šikovné riešenie obrázka v pozadí + pozadie ako slideshow

Ako na obrázok v pozadí ktorý sa prispôsobí všetkým rozlíšeniam len cez CSS? A čo keby sme zašli ešte ďalej a vytvorili si na pozadí bežiacu prezentáciu takýchto obrázkov? ;)

Toto riešenie je funkčné vo všetkých prehliadačoch a je založené na viacerých CSS funkciách. Celá myšlienka je postavená na css funkcii z-index, ktorá nám určuje viditeľnosť bloku na Z osi (teda nám určuje hĺbku elementu) a relatívnej pozícii obsahu stránky.

V základe to bude vyzerať nejak takto:

Pričom v css to bude vyzerať nasledovne:

#pozadie img{
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
#obsah_stranky{
z-index: 20;
position:relative;
}

Obrázok v pozadí
Takto zadefinované css nám urobí autocrop (automatické prispôsobenie) pozadia. Základ je dodržať relatívne hodnoty v definícii a zafixovať pozadie na ľavý horný roh. Rovnako dôležité je definovať min-width na absolútnych 1024px (momentálne najmenšie používanie rozlíšenie monitorov) pre kompatibilitu na všetkých rozlíšeniach a prehliadačoch.

Obsah stránky
Pre korektné zobrazenie toho čo chceme dosiahnúť je nutné už len zadefinovať z-index divu s obsahom v hodnote vyššej ako 1 a nastaviť relatívnu pozíciu (ináč by sa nám obsah stránky vôbec nezobrazil)

DEMO: http://thewitcher.sk/zajtra/fix/

STIAHNÚŤ: fix_pozadie_demo.rar

Dynamické využitie

Dynamické využitie tejto koncepcie by mohlo byť celkom zaujímavé. Predstavte si, že máte 5 krásnych fotiek ktoré by sa premietali na pozadí. Stačí nám prakticky použiť obyčajný jquery slider. Ja som použil jednoduchý slider z http://jonraasch.com/blog/a-simple-jquery-slideshow

V som len aplikovali kód a princíp, ktorý je o pár riadkov vyššie, na css štýlovanie obrázkov v slideri. O princípoch slideru sa nebudem rozpisovať, to nájdete na stránke autora toho jquery zázraku ;)

#slideshow {
 position:relative;

}

#slideshow IMG {
 min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index:8;
opacity:0.0;

}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;

}

#slideshow IMG.last-active {
    z-index:9;
}

#obsah_stranky{
z-index: 20;
position:relative;
}

DEMO: http://thewitcher.sk/zajtra/slide/

STIAHNÚŤ: slide.rar

Páčil sa ti článok? Ukáž mi svoju lásku a FOLLOWNI ma na https://twitter.com/sawyerernest