CSS INTENSIVSTATION

CSS Hintergrundbilder

Der Hintergrund eines Elements kann als Farbe oder als Hintergrundbild festgelegt werden. Mit CSS kann man Hintergrundbilder horizontal und vertikal wiederholen, oder einzeln plazieren. Hintergründe werden nicht vererbt.

Eigenschaften

  • background-image:url(bild.gif)
  • background-repeat:repeat | no-repeat | repeat-x | repeat-y;
  • background-position:left top | center | 20px 50%;
  • background-attachment:scroll | fixed | local;
  • background-size:auto | 100% 100% | cover | contain;

background-image

Mit background-image wird ein Bild als Hintergrund eines Elements definiert. Ohne weitere Angaben wird das Bild in seiner Originalgrösse dargestellt und automatisch wiederholt.

1
.bild1{background-image:url(bild.gif); }

Werte: none | url()

background-repeat

background-repeat steuert, ob und wie ein Hintergrundbild horizontal und/oder vertikal wiederholt wird. Standardmässig wird ein Hintergrundbild in beide Richtungen gekachelt.

2
.bild2 {
background-image:url(bild.gif); 
background-repeat:repeat-x;}
3
.bild3 {
background-image:url(bild.gif); 
background-repeat:repeat-y;
}

Werte:no-repeat | repeat | repeat-x | repeat-y

Kurzschreibweise

Unter background können Werte zusammengefasst werden.

background: #ccc url(blumen.gif) no-repeat fixed right bottom;

Reihenfolge (empfohlen): Farbe → Bild → Repeat → Attachment → Position

background-position

Mit background-position wird festgelegt, wo ein Hintergrundbild innerhalb eines Elements positioniert wird. Die Position wird immer relativ zur Fläche des Elements berechnet.

.bild4 {
 background: url(bild.gif) no-repeat center center;
}
.bild5 {
 background: red url(bild.gif) no-repeat 85% 20px ;
}

Die Position setzt sich aus zwei Werten zusammen: einem horizontalen und einem vertikalen Wert.

  • horizontal: left | center | right
  • vertikal: top | center | bottom

Reihenfolge: Der erste Wert beschreibt die horizontale Position, der zweite Wert die vertikale Position. Wird nur ein Wert angegeben, wird der zweite automatisch auf center gesetzt. 

background-position: left bottom;
background-position: right; /* entspricht: right center */

Alternativ können auch Pixel oder Prozentwerte verwendet werden:

background-position: 20px 50%;
background-position: 10% 80%;

background-attachment

background-attachment bestimmt, wie sich ein Hintergrundbild beim Scrollen verhält und ob es an das Element oder an das Browserfenster gebunden ist.

scroll (Standard)
Das Hintergrundbild ist an das Element gebunden und scrollt zusammen mit dessen Inhalt. Bewegt sich die Seite, bewegt sich auch das Hintergrundbild.

fixed
Das Hintergrundbild ist relativ zum Browserfenster (Viewport) fixiert. Beim Scrollen bleibt das Bild an derselben Position sichtbar, während sich der Seiteninhalt darüber hinweg bewegt. Dieser Effekt wird häufig für einfache Parallax-Hintergründe genutzt.

local
Das Hintergrundbild ist an den scrollbaren Inhalt des Elements gebunden. Es bewegt sich nur, wenn das Element selbst scrollbar ist (z. B. bei overflow: auto).

body {
background:url(bild.gif) no-repeat fixed right center;
}

background-size

Mit background-size wird festgelegt, wie gross ein Hintergrundbild innerhalb eines Elements dargestellt wird. Die Grösse des Bildes ist unabhängig von der Grösse des Elements und kann explizit oder automatisch angepasst werden.

 
background: url(bild.gif) no-repeat bottom left;
background-size: 100%  100%;
 
background: lavender url(bild.gif) no-repeat center center;
background-size: auto 100px;
 
background: url(bild.gif) no-repeat top left / cover;
 
background:  url(bild.gif) no-repeat center center / contain;

Die Grösse kann mit zwei Werten angegeben werden:

  • erster Wert: Breite des Hintergrundbildes
  • zweiter Wert: Höhe des Hintergrundbildes

Alternativ stehen spezielle Schlüsselwörter zur Verfügung:

  • cover – das Bild füllt das Element vollständig aus, Teile können abgeschnitten werden
  • contain – das Bild wird vollständig angezeigt, es können freie Flächen entstehen

Kurzschreibweise mit background-size

background: #ccc url(bild.gif) no-repeat right bottom / cover fixed;

Reihenfolge (empfohlen): Farbe → Bild → Repeat → Position / Size → Attachment

Kurz gesagt

  • position: erst horizontal, dann vertikal
  • size: bestimmt die Grösse des Bildes, nicht des Elements
  • background-size kann in der Kurzschreibweise nur mit / angegeben werden.