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

Venujem sa propagačnej grafike, internetovému marketingu, UI designu, vývoju internetových aplikácií, gitare, písaniu a som css3 mág level 7 s palicou fire damage +20 pts =)
11 komentárov k článku:
Komentovať môžu iba prihlásení
Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)
Prihlás sa tu, ak už máš profil na Zajtra.sk:

Pokud chcete, aby background slider fungoval taky v IE, tak si CSS upravte následovně:
#slideshow IMG { display: none; } #slideshow IMG.active { display: block; }
Výše uvedené řádky akorát přidejte. To co tam má autor článku nemazat. :-)
IE 7-9 nezvládá opacity. Dá se to sice obejít ještě jinak, ale toto je asi nejjednodušší řešení, jak to zprovoznit taky pro IE. ;-) Netestoval jsem to, takže snad vám to bude fungovat správně.

nevie niekto urobit nieco aby to islo aj na IE ???.. pripadne podobny navod na slide all background ??..please :-))

tak toto sa uplne ale uplne hodi na vsetky moje "firemne" webky skoro ;) diky :)

pekny serial zatial...sice robim len grafiku ale rad si pozrem ako dosiahnut podobne veci. Nech nie som uplne blby :D
Novinky
2 rokmi
Aprílové vtípky: Výběr toho nejlepšího kolem počítačů, internetu a techniky
Výběr nejlepších aprílových vtípků 2019
2 rokmi
Fotky Google sa učia lepšie pracovať s dokumentmi
Spoločnosť Google prostredníctvom svojho účtu na sociálnej sieti Twitter oficiálne predstavila novú funkciu svojej aplikácie Fotky Google.
2 rokmi
Gmail dovoľuje naplánovať poslanie emailu neskôr
Spoločnosť Google dnes oznámila pridanie funkčnej novinky do svojej populárnej webmailovej služby Gmail, možnosť naplánovať poslanie emailu na neskôr.
3 rokmi
Používatelia Chrome začali prechádzať na nový rýchlejší Firefox, avizujú dáta Mozilly
Nový lepší a rýchlejší prehliadač Firefox 57 Quantum vyúsťuje zrejme do viac používateľov prechádzajúcich respektíve vracajúcich sa na tento prehliadač z iných prehliadačov, na osobných počítačoch aj smartfónoch.
3 rokmi
Briti dokončili kúpu SK-NIC-u. Nové .sk domény nechávajú za 8.4 eur
Predaj správcu slovenskej domény .sk, SK-NIC, bol dokončený a novým majiteľom po telekomunikačnej skupine Danubiatel, do ktorej patrí napríklad Swan a 4ka, je britská spoločnosť CentralNic.
Staršie novinky »TOP dlhšie
- 01 Farbičky v HTML a CSS, alebo? (1072x)
- 02 Tiché COMBO Logitech MK295 (953x)
- 03 Kingston uvádza 128GB verziu šifrovaného USB (914x)
- 04 Pochopte, ako vytvoriť virtuálny obchod v 6 krokoch (790x)
- Aj ty môžeš byť najčítanejší. Napíš článok »
TOP tento mesiac
- Aj ty môžeš byť najčítanejší. Napíš článok »
Nové články:
- 14.Kingston uvádza 128GB verziu šifrovaného USB
sep - 10.Tiché COMBO Logitech MK295
sep - 24.Farbičky v HTML a CSS, alebo?
aug - 23.Pochopte, ako vytvoriť virtuálny obchod v 6 krokoch
aug - 29.Kamery, cloud a bezpečnosť
jul - Viac »
- Aj ty môžeš byť najčítanejší. Napíš článok »
Pekné veci
Pekné veci
Pekné veci
Pekné veci
Posledné komentáre
- Pokiaľ používaš nejaký lepší bitmapový editor, napr. Photoshop, a chceš robiť retuše, ed...
- Veľmi dobrý článok a pre začiatočníka úplne odrazový mostík. https://ludwaismania1.blogs...
- Nova international a prima lus majú vysporiadané pravs ale aj CNN prima News
- Tv Joj nijako neobmedzuje šírenie médii, ktoré majú vysporiadané licenčné práva pre Slov...
- Nech televizie vrátia naspäť originál verzie a tie internationali nech zrušia. Každý si ...
Kritika
Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!
Reklama
Seriály zo Zajtra.sk
· Ako písať blog
· Ako sa stať PHP ninja s Yii Frameworkom
· Aplikácie pre Facebook
· CSS triky
· iOS vývojára príhody a skúsenosti
· Jednoduché programy, ktoré vám ušetria čas
· Modelovanie webového sídla
· Nauč sa CodeIgniter [HD]
· Nauč sa jQuery [HD]
· Nette PHP framework
· OOP v Javascripte
· Programujeme v Jave
· Programujeme v Lazaruse
· Programujeme v Pythone
· Robíme Eshop v ASP.NET Web Pages
· Slovenskí iOS developeri
· Webdizajn krok po kroku
· Yablkov TurboTip [HD]
To si nikto z diskutujucich nevsimol, ze obrazky na pozadi su pri urcitom rozliseni deformovane?