Jak na to – obrázek celé stránky
Naučte se, jak vytvořit obrázek na pozadí celé stránky pomocí CSS.
Obrázek celé stránky
Přečtěte si, jak vytvořit obrázek na pozadí, který pokryje celé okno prohlížeče. Následující příklad ukazuje obrázek na pozadí responzivní na celou obrazovku (a polovinu obrazovky):
Demo – obrázek na pozadí celé stránky
Demo - obrázek na pozadí půl stránky
Jak vytvořit obrázek v plné výšce
Použijte prvek kontejneru a přidejte do kontejneru obrázek na pozadí pomocí height: 100%
.
Tip: Použijte 50 % k vytvoření půlstránkového obrázku na pozadí. Poté použijte následující vlastnosti pozadí k dokonalému vystředění a zmenšení obrázku:
Poznámka: Abyste se ujistili, že obrázek pokryje celou obrazovku, musíte také použít height: 100%
pro <html> a <body>:
Příklad
body, html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
Obrázek na pozadí půl stránky:
Příklad
.bg {
height: 50%;
}