Background-image na telefonech

Ve skutečnosti tohle není blog ale veřejné poznámky.

Background-image na telefonech

Když chceš dát fixní obrázek na pozadí webu, použiješ něco jako
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>
plus css
#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;
}

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.
Tagy: