Die Eigenschaft für die Hintergrundposition

Im vorherigen Artikel haben wir alles über die Background-Repeat-Eigenschaft und das Wiederholen des Hintergrundbilds in beide Richtungen als Standardverhalten besprochen. Wenn Sie nicht möchten, dass der Hintergrund wiederholt wird, kann es nützlich sein, die Position des Hintergrunds zu steuern. Wie Sie den vorherigen Beispielen entnehmen können, befindet sich die Standardposition in der oberen linken Ecke. Dies kann jedoch mithilfe der Eigenschaft background-position sehr einfach geändert werden:

<style type="text/css">
.box {
    background-image: url('http://css3-tutorial.net/images/blu_stripes.png');
    background-repeat: no-repeat;
    background-position: top center;
    width: 200px;
    height: 150px;
    border: 1px solid black;
    text-align: center;
    font-weight: bold;
    font-size: 2em;
}
</style>

<div class="box">
    Hello, world!
</div>

Beachten Sie, wie ich zwei durch ein Leerzeichen getrennte Werte verwende, um die gewünschte Position anzugeben. Der Grund dafür ist, dass die Eigenschaft background-position einen Wert vom Typ [position] annimmt, der zur Angabe einer 2D-Position verwendet wird. Dies bedeutet, dass wir entweder ein einzelnes Schlüsselwort verwenden können, um eine Seite anzugeben, z.B.: oben ein Wert mit zwei Schlüsselwörtern, wie ich es in diesem Beispiel getan habe, oder sogar ein Prozent- oder Längenwert.

Im obigen Beispiel möchte ich, dass der Hintergrund in der Mittelposition platziert wird und am oberen Rand des Elements ausgerichtet wird. Beim Positionieren des Hintergrunds gibt es jedoch viele andere Möglichkeiten. Schauen Sie sich einfach dieses nächste Beispiel an, in dem ich Ihnen einige der vielen Kombinationen zeige:

<style type="text/css">  
.box {  
    background-image: url('http://css3-tutorial.net/images/blu_stripes.png');  
    background-repeat: no-repeat;  
    width: 200px;  
    height: 150px;  
    border: 1px solid black;  
    text-align: center;  
    font-weight: bold;  
    font-size: 1.5em;  
    margin: 10px;  
}  
</style>  

<div class="box" style="background-position: top;">  
    Top  
</div>  

<div class="box" style="background-position: top right;">  
    Top, right  
</div>  

<div class="box" style="background-position: bottom left;">  
    Bottom, left  
</div>  

<div class="box" style="background-position: 10% 50%;">  
    Percentage based  
</div>  

<div class="box" style="background-position: 10px 30px;">  
    Length based  
</div>  

<div class="box" style="background-position: 50% bottom;">  
    Combination  
</div>

Beachten Sie, dass wir entweder einen oder zwei Werte verwenden können und die Positionsschlüsselwörter (oben, unten, links, rechts und in der Mitte) sowie Prozentsätze und Längen verwenden können - wir können sie sogar wie im letzten Beispiel kombinieren!

Zusammenfassung

Durch die Flexibilität der Eigenschaft "Hintergrundposition" können Sie Ihre Hintergründe sehr genau positionieren. Da die Eigenschaft längen- und prozentbasierte Werte akzeptiert, werden natürlich auch negative Werte akzeptiert. Dies wird häufig verwendet, wenn mehrere Bilder kombiniert werden, z. Symbole in ein großes Bild (um Bandbreite und Browserverbindungen zu sparen) und dann nur den relevanten Teil des Bildes anzuzeigen.