Background befehle HTML

background-color

background-color mach das der Hintergrund in einer Farbe ist.

background-image

background-imgage setzt ein Bild als Hintergrund Wird eingefügt indem man url ("name der Datei mit extension")

background-repeat und background-position

background-repeat legt fest ob und wie ein Hintergrundbild wiederholt wird. Es gibt die option no-repeat was das Bild nur einmal auftauchen lässt. background-position legt fest wo die Startposition des Hintergrundbild ist. Position des Bildes kann beispielsweise mit right auf die rechteseite geschoben werden.

background-clip

background-clip definiert wie weit der hintergrund in ein Element hineinreicht. border-box lässt den Hintergrund bis zur border kommen. padding-box lässt den Hintergrund bis zur Padding box kannte kommen. content-box lässt den Hintergrund bis zur content box kannte kommen.

background-origin

background-origin legt fest wo das Hintergrundbild positioniert ist. Bsp. es ist immer oben links positioniert und mit background-origin legt man fest ob es in der padding-box, border-box oder content-box startet. Hier ist das Bild an der padding-box.

background-size

background-size legt fest wie groß der Hintergund ist, wenn ein Bild im Hintergrund hinterlegt ist. Mit cover wird das Bild so vergrößert dass das Bild über die komplette box zu sehen. Mit auto wird das bild in der originalen größe dargestellt. Mit contain wird das Bild so angepasst das es komplett zusehen ist. Hier ist das Hintergrund Bild auf 200px festgelegt worden.

background-attachement

background-attachement legt fest ob das Hintergrundbild sich mit der Website bewegt oder fixiert bleibt. Mit scroll bewegt sich das Bild im Hintergrund mit der kompletten Seite. Mit fixed bleibt das Hintergrund Bild fest und wird sich nicht mit der Seite bewegen.

background-blend-mode

background-blend-mode legt fest wie stark der Hintergrund sich auf den unterschiedlichen Ebenen überblendet. Das sind die unterschiedlichen Ebenen: normal, multiply, screen, overlay, darken, lighten, color-dodge, saturation, color, luminosity. Hier: Hintergrundbild mit Overlay.