Mnoho lidí již přemýšlelo jak co nejjednodušeji dát obrázek na pozadí stránky tak, aby se roztahoval dle velikosti okna. Osobně jsem to použil jen jednou, nicméně vidím, že to začíná být poměrně oblíbené. Viděl jsem mnoho různých řešení, některé né uplně funkční a proto vám nabídnu jedno odzkoušené. A opět je to velice jednoduché. Jen bych poprosil, abyste zvážili jaký obrázek na pozadí budete dávat, protože není úplně ideální vzít bez úprav nějakou fotku, která má třeba velikost 15 mega a vrazit jí do webu. :D Proto prosím nejprve zvažte, zda opravdu potřebujete obrázek v tak vysokém rozlišení, nejlépe to nejdříve rozumně zmenšete a prožeňte nějakým softem, který to optimalizuje pro web. Není nic horšího než čekat minutu na to, než se pozadí stáhne z webu a do té doby vám to ničí design stránky. Když budete mít připojení 50 mega download, tak to zřejmě ani nepostřehnete, ale bylo by rozumné myslet i na ostatní uživatele vašich stránek, kteří nemají takové možnosti..
Takže jediné co stačí je připojit ke stránce css soubor a do něj napsat toto:
body {
width: 100%;
height: 100%;
background-image:url(css/background.jpg);
background-attachment: fixed;
background-size: cover;
margin: 0px;
padding: 0px;
}
Všiměte si prosím, že background.jpg je v podadresáři css, v zásadě ten obrázek si pojmenujte jak chcete a adresář také, nebo ho klidně vypusťte. Já osobně obrázky které se používají pro design mám v samostatném adresáři, udržuje to větší přehlednost.
No a to je vše, opravdu velice, velice jednoduché.
CSS class versus id