Vlastnost CSS velikosti pozadí
Příklad
Zadejte velikost obrázku na pozadí pomocí „auto“ a v pixelech:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
}
#example2 {
background: url(mountain.jpg);
background-repeat:
no-repeat;
background-size: 300px 100px;
}
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
Vlastnost background-size
určuje velikost obrázků na pozadí.
S touto vlastností můžete použít čtyři různé syntaxe: syntaxe klíčového slova ("auto", "cover" a "contain"), syntaxe s jednou hodnotou (nastavuje šířku obrázku (výška se změní na "auto"), dvouhodnotová syntaxe (první hodnota: šířka obrázku, druhá hodnota: výška) a vícenásobná syntaxe pozadí (oddělená čárkou).
Výchozí hodnota: | auto |
---|---|
Zděděno: | Ne |
Animovatelné: | Ano. Přečtěte si o tématu Animable |
Verze: | CSS3 |
Syntaxe JavaScriptu: | objekt .style.backgroundSize="60px 120px" |
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.
Čísla následovaná -webkit-, -moz- nebo -o- určují první verzi, která pracovala s předponou.
Property | |||||
---|---|---|---|---|---|
background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
Syntaxe CSS
background-size: auto|length|cover|contain|initial|inherit;
Hodnoty vlastností
Value | Description | Play it |
---|---|---|
auto | Default value. The background image is displayed in its original size | |
length | Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto". Read about length units | |
percentage | Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto" | |
cover | Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges | |
contain | Resize the background image to make sure the image is fully visible | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Další příklady
Příklad
Zadejte velikost obrázku na pozadí v procentech:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 100%
100%;
}
#example2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 75%
50%;
}
Příklad
Zadejte velikost obrázku na pozadí s „obálkou“:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: cover;
}
Příklad
Zadejte velikost obrázku na pozadí pomocí "obsahovat":
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain;
}
Příklad
Zde máme dva obrázky na pozadí. Velikost prvního obrázku na pozadí určíme pomocí „obsahovat“ a druhého obrázku na pozadí pomocí „obálky“:
#example1 {
background: url(img_tree.gif), url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain, cover;
}
Příklad
K vytvoření „hrdinského“ obrázku použijte různé vlastnosti pozadí:
.hero-image {
background-image: url("photographer.jpg"); /* The
image used */
background-color: #cccccc; /* Used if the image is
unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
Související stránky
CSS tutoriál: CSS pozadí
HTML DOM reference: vlastnost backgroundSize