Napsal uživatel honza dne 14. Září 2014 - 15:26.
Když chceš dát fixní obrázek na pozadí webu, použiješ něco jako
plus css
V zápisu je použit soubor bg-desktop.jpg, je jasný že pro mobil použiješ třeba media-quires a načteš zmenšenou verzi obrázku.
body {
background-image: url(images/bg-desktop.jpg);
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
background-size: cover;
}Problém je ale se špatným vykreslováním na telefonech. U defaultního prohlížeče u Androidu je vše v pořádku, problém nastává například s operou nebo chromem.
Jak se projevuje? Při vyplnění pozadí obrázkem se používá celková výška stránky, ne displeje. Obrázek je tím hnusnější, čím větší (delší) obsah na webu máš.
A co s tím? Odeber definici pozadí z body, vytvoř prázdný div, tomu nastavat pozadí a fixní pozici.
Příklad:
<div id="bg"></div>#bg {
background-image: url(images/bg-desktop.jpg);
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
background-size: cover;
width: 100%;
height: 100%;
position: fixed;
top: 0;
}