Ihre Suchergebnisse

    background-repeat

    Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

    Übersicht:

    Die background-repeat Eigenschaft bestimmt, ob und wie Hintergrundbilder wiederholt werden.

    Ab Gecko 1.9.2 (Firefox 3.6) können mehrere Hintergrundwiederholungen, durch Kommata getrennt, definiert werden.
    Vorherige Versionen unterstützen nur einen Wert.
    • Standardwert: repeat
    • Anwendbar auf: Alle Elemente
    • Vererbbar: Nein
    • Prozentwerte: Nein
    • Medium: visuell
    • berechneter Wert: wie festgelegt

    Syntax

    background-repeat:  <Hintergrundwiederholung>[, <Hintergrundwiederholung>]*

<Hintergrundwiederholung>:
repeat | repeat-x | repeat-y | no-repeat | round | space | inherit

    Werte

    repeat
    Das Hintergrundbild wird horizontal und vertikal wiederholt.
    repeat-x
    Das Hintergrundbild wird nur horizontal wiederholt.
    repeat-y
    Das Hintergrundbild wird nur vertikal wiederholt.
    no-repeat
    Das Hintergrundbild wird nicht wiederholt. Nur ein Exemplar wird angezeigt.
    round
    Nicht implementiert Das Hintergrundbild wird so oft wiederholt, wie es in das Element hinein passt. Dabei kann das Hintergrundbild in seiner Größe angepasst werden, um auf die volle Breite bzw. Höhe des Elements ausgestreckt zu werden.
    space
    Nicht implementiert Das Hintergrundbild wird so oft wiederholt, wie es in das Element hinein passt. Allerdings wird die Bildgröße nicht angepasst, sondern soviel Platz zwischen den Hintergrundbildern gelassen, sodass sich der Hintergrund auf das gesamte Element verteilt.
    inherit
    Der Wert des Elternelements wird geerbt.

    Beispiele

    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.

    Browser Kompatibilität

    Browser ab Version mehrere Hintergrundbilder round und space Werte
    Internet Explorer 4.0 --- ---
    Firefox (Gecko) 1.0 (1.0) 3.6 (1.9.2) ---
    Opera 3.5 10.5 10.5
    Safari (WebKit) 1.0 (85) 1.3 (312) ---

    Spezifikation

    Siehe auch

    Schlagwörter des Dokuments und Mitwirkende

    Schlagwörter: 
     Mitwirkende an dieser Seite: SphinxKnight, fscholz, Michael2402
     Zuletzt aktualisiert von: SphinxKnight,