CSS: Hintergrundsfarbe und Hintergrundsmotiv

Dieser Artikel wurde von Do, Hoang Viet am Mittwoch, 3. April 2013 verfasst. Aktualisiert: 28.01.2014 18:44:37

Für das Anpassen des Hintergrunds wird die Property background verwendet. Neben einer Hintergrundsfarbe, lässt sich auch ein Hintergrundsmotiv definieren und pixelgenau platzieren.

Die nachfolgende Definition würde den Hintergrund auf "Grün" setzen.

body {
  background: #00ff00;
}

Neben Farben können auch Hintergrundsbilder genutzt werden. Hierzu musst man lediglich statt eine Farbe ein Bild angeben.

body {
  background: url('/images/irgendwas.png');
}

Der Browser nutzt das angegebene Bild in diesem Fall als Hintergrundsbild. Wenn dieser nicht die ganze Anzeigefläche abdeckt, wird das Bild dupliziert. Ist es nicht erwünscht, könnt ihr "no-repeat" anfügen.

body {
  background: url('/images/irgendwas.png') no-repeat;
}

Anstelle von no-repeat kann repeat-x oder repeat-y stehen. In diesem Fall wird nur in horizontal bzw. vertikal wiederholt.

Im Falle von "no-repeat", ist es in der Praxis üblich, dass man neben den Hintergrundsmotiv auch eine Hintergrundsfarbe definiert. Hierzu bündelt man einfach die obere Farbdefinition mit dem Motiv

body {
  background: #00ff00 url('/images/irgendwas.png') no-repeat;
}

Das Hintergrundsmotiv lässt sich auch nocht beliebig positionieren.

body {
  background: #00ff00 url('/images/irgendwas.png') no-repeat 20px 100px;
}

In diesem Fall würde das Bild an der Position (20,100) auf der Anzeigefläche platziert werden. Anstelle einer Pixelangabe, können auch die Schlüsselwörter benutzt werden

left Linke Ecke
right Rechte Ecke
top Obere Ecke
bottom Untere Ecke
center Zentriert

Folgende Definition

body {
  background: #00ff00 url('/images/irgendwas.png') no-repeat left top;
}

 würde das Motiv an der linken oberen Ecke platzieren.

 
blog comments powered by Disqus

Google Anzeigen

Neusten Blogeinträgen

  • CSS: Animationen

    CSS3 bietet von Haus aus Möglichkeiten zur Definition von Animationen über die Property animation. Wie es funktioniert zeigen wir in diesem Artikel.

  • CSS: Alternierende Tabellenzeilen

    Um die Lesbarkeit von Tabellen zu steigern, bietet die CSS die Möglichkeit Tabellenzeilen alternierend zu färben. Wie das funktioniert zeigen, wir ...

  • Unity3D: Konsolenausgabe formatieren

    Die Unitykonsole ist einer der meistgenutzten Feature wenn es bei Unity um Fehlersuche und -behandlung geht. Sie wird dabei schnell voll und verli ...

  • Unity3D: Singleton für langsame Operationen

    Operationen wie Object.FindObjectOfType werden in der Dokumentation von Unity3D Entwickler selbst als sehr langsam beschrieben. Aus dem Grund wird ...

  • Unity3D: Optionale Parameter

    Unity3D (4.3.1) unterstützt keine optionale Parameter, wenn die betroffene Skriptdatei in einem Namespace definiert wird.

Popular Threads

Share it on your network