Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

background-repeat

To tłumaczenie jest niekompletne. Pomóż przetłumaczyć ten artykuł z języka angielskiego.

Podsumowanie

background-repeat określa, czy obrazek jest powtarzany (kafelkowany) i w jaki sposób.

Wartość początkowarepeat
Stosowana dowszystkich elementów. It also applies to ::first-letter and ::first-line.
Dziedziczonano
Mediavisual
Wartość wyliczonaa list, each item consisting of two keywords, one per dimension
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Składnia

background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit

Wartości

repeat
Obrazek jest powtarzany zarówno w poziomie, jak i pionie.
repeat-x
Obrazek jest powtarzany tylko w poziomie.
repeat-y
Obrazek jest powtarzany tylko w pionie.
no-repeat
Obrazek nie jest powtarzany: rysowana jest tylko jedna kopia obrazka.

Przykłady

HTML

<ol>
    <li>no-repeat
        <div class="one">&nbsp;</div>
    </li>
    <li>repeat
        <div class="two">&nbsp;</div>
    </li>
    <li>repeat-x
        <div class="three">&nbsp;</div>
    </li>
    <li>repeat-y
        <div class="four">&nbsp;</div>
    </li>
    <li>repeat-x, repeat-y (multiple images)
        <div class="five">&nbsp;</div>
    </li>
</ol>

CSS

/* Shared for all DIVS in example */
li {margin-bottom: 12px;}
div {
    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
    width: 144px;
    height: 84px;
}

/* background repeat CSS */
.one {
    background-repeat: no-repeat;
}
.two {
    background-repeat: repeat;
}
.three {
    background-repeat: repeat-x;
}
.four {
    background-repeat: repeat-y;
}

/* Multiple images */
.five {
    background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
                       url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
    background-repeat: repeat-x,
                       repeat-y;
    height: 144px;
}

Result

In this example, each list item is matched with a different value of background-repeat.

Specyfikacje

Zgodność z przeglądarką

Przeglądarka Najniższa wersja
Internet Explorer 4
Firefox 1
Netscape 4
Opera 3.5

Autorzy i etykiety dokumentu

 Autorzy tej strony: SphinxKnight, teoli, Witia, Mgjbot, Gabrys
 Ostatnia aktualizacja: SphinxKnight,