[CSS] Background - Image Größe

Drucken
( 1 Vote )
Hauptkategorie: Programmieren Kategorie: CSS
Erstellt am 11.01.2013 Zuletzt aktualisiert am 21.01.2013 Geschrieben von Jonny132
Einem Element ein Hintergrundbild zuweisen ist mit der CSS Background-Eigenschaft möglich.
Der Nachteil dieser Methode ist, dass das Bild immer in Origninalgröße dargestellt wird bzw. mit der background-repeat - Eigenschaft auf seine Bedürfnisse anpassen muss.

Mit CSS3 kommt nun die neue Eigenschaft background-size hinzu, welche die Größe des Hintergrundbildes bestimmen kann.
Möglich sind Angaben in Pixel und Prozent.

Damit ältere Versionen des Firefox ebenfalls mit der Angabe klarkommen, habe ich die Firefox spezifische angabe -moz-background-size in das Tutorial mitaufgenommen.


Beispiel1:
      #Beispiel1
      {
        background:url(book.png);
        background-size:80px;
        -moz-background-size:80px;
        background-repeat:no-repeat;
      }
    <div id="Beispiel1"> 
      Hier kommt der Inhalt, < br/>
      in dem Sie das Hintergrundbild < br/>
      anzeigen wollen.
    </div>
Background-size mit relationaler Pixel Angabe

In diesem ersten Beispiel, habe ich nur die Breite von 80 Pixel angegeben. Die Höhe wird somit automatisch relativ zur Breite angepasst (sofern der Inhalt auf diese die CSS Backgrount-size angewendet wurde groß genug ist, ansonsten wird der Rest des Bildes abgeschnitten).


Beispiel 2:
      #Beispiel2
      {
        background:url(book.png);
        background-size:100%;
        -moz-background-size:100%;
        background-repeat:no-repeat;
      }
    <div id="Beispiel2">
      Hier kommt der Inhalt, < br/>
      in dem Sie das Hintergrundbild < br/>
      anzeigen wollen. 
    </div>
background-size Beispiel mit Prozentwerten


Im zweiten Beispiel wurde ein Prozentwert von 100 verwendet. Das bedeutet, dass das Hintergrundbild auf auf die Ganze Breite des Elements in welchem es angezeigt werden soll, je nach Auflösung, vergrößert oder verkleinert wird.

Beispiel 3:
      #Beispiel3
      {
        background:url(book.png);
        background-size:80px 40px;
        -moz-background-size:80px 40px;
        background-repeat:no-repeat;
      }
    <div id="Beispiel3">
      Hier kommt der Inhalt, < br/>
      in dem Sie das Hintergrundbild < br/>
      anzeigen wollen. 
    </div>
background-size Beispiel mit 2 Werten
Im letzten Beispiel wurden zwei Pixelwerte für Breite und Höhe angegeben. Das Bild wird somit genau auf diese Werte getrimmt.
      

    Veröffentlichen Sie ihre Kommentare ...