Šířka stránky - zobrazení v mobilních prohlížečích

Pavel V.:

„sociální sítě úplně mimo...“
Odkazy umiestni do divu, nechaj ich plávať a daj im clear: right; Bude to však fungovať len za predpokladu, že vlastnosť float priradíš aj divu nad pätou.
Druhá možosť je umiestniť aj div textu aj päty do jedného spoločného divu, ktorému nastavíš šírku 25%.

„Možná jsem si zbytečně zkomplikoval práci s použitím css a bylo by jednodušší použít jen základní html...?“Prečo ten otáznik?
Určite nie, bez CSS by to nefungovalo ani tak ako teraz...

„Použil jsem obrázek na pozadí o velikosti 1920*1080 (nevím zda jsem zvolil správně?)“
Obrázok na pozadí môžeš urobiť tak, že ho prerobíš tak, aby obsahoval prechod a celému body dáš background-color vo farbe, ako prechod končí.

Pavel V.:
„Rád bych ale, aby výška obrázku na pozadí zůstala neměnná (tzn. měnila by se v závislosti na výšce prohlížeče aby nedocházelo k opakování pozadí).“
To som vôbec nepochopil...Veď stránka v tom odkaze, čo si tu dal pracuje presne ako chceš.

Nanešťastie, ja som to zbadal až teraz a už som urobil živú ukážku, tak ju tu dám:
kód;
ukážka.
Môžeš si pozrieť, ako idú divy za sebou, stačí vymazať symbol zahájenia komentáru "//" na začiatku riadkov s farbami.

Na ukotvenie obrázka som použil background-size: 100%;

// není komentář v css. Způsobí sice, že vlastnost nebude fungovat, ale je to chyba.
Správný komentář je /* ... */

juriad:
Použil som aj správny komentár na správny účel (riadok 9). Dve čiarky "//" som použil iba na deaktivovanie vlastnosti, lebo som nechcel vymazávať farbu, keby ju chcel Pavel vidieť. Ale ďakujem za upozornenie, aj keď nie som zástancom kódu, z ktorého je polovica komentovaná a nikto z neho nevyjde.

Pavel V.:
„Podle návodu zde by se o to měl starat parametr conrtain, ale v mém případě nefunguje a pozadí při jeho použití zmizí zcela.“
Jaký používáš prohlížeč? Tato vlastnost nefunguje všude, Internet Explorer pod verzi 9 nepodporuje CSS 3, ve které je vlastnost obsažena, samotná devítka ignoruje většinu CSS 3 vlastností. Chceš-li zajistit zpětnou kompatibilitu, místo CSS použij pseudopozadí (pozadí, které je vloženo pomocí elementu img, je mu nastaveno absolutní pozicování a záporný z-index). Jinak parametr contain se snaží vecpat pozadí do divu tak, aby bylo vidět celé, ale mělo zachované proporce:

>>>> contain: Scale the image to the largest size such that both its width and its height can fit inside the content area
To znamená, že na mobilu se ti ukáže celý obrázek zmenšený tak, aby se tam vešel. Pokud chceš zpětnou kompatibilitu ignorovat (což bych nedoporučoval), použij místo contain parametr cover. Ten ti vyplní celý prostor tak, aby nezanechal žádné volné místo, což je přesně to, co potřebuješ. Netestoval jsem to na delší stránku, která roluje, je možné, že obrázek se natáhne i dolů, aby vyplnil celé body. To ještě budu muset vyzkoušet. Dám ti vědět.

EDIT: Jestli chceš skutečně zobrazit celou výšku obrázku nehledě na velikost stránky, zafixuj pozadí na stránku. Jinak se ti to v případě rolující stránky (což je na mobilu velmi často) roztáhne i dolů za viditelnou bariéru. Mimochodem, ty asi chceš pozadí mít pořád na jednom místě, aby se neposouvalo se stránkou, takže tohle je řešení pro dnešní prohlížeče. Na mobilu by to mělo fungovat.

EDIT: Tady jsou screenshoty v mém Dropboxu (jejich názvy mluví za vše, pro jistotu jsem doplnil popisek za URL):
https://www.dropbox.com/s/5ly0ff7ipmxuq53/bgsize_test_chrome.jpg (Google Chrome poslední verze)
https://www.dropbox.com/s/nu0tqshptbnbzwc/bgsize_test_ie11.jpg (Internet Explorer 11)
https://www.dropbox.com/s/jvvp4e3ovtzin24/bgsize_test_editor.jpg (Zdrojový kód testovací stránky)

Ještě jsem udělal živou ukázku, že nekecám :-) Klikni na zdrojový kód, máš tam komentář :-) Ještě se podívej čistě na ukázku a zkus si zobrazit zdrojový kód stránky pomocí funkce prohlížeče :-)
Pro úplnost zde ještě uvedu URL:
Zdrojový kód: http://kod.djpw.cz/tldb
Samotná ukázka: http://kod.djpw.cz/tldb-