CSS-Hintergrund

CSS ermöglicht die Anwendung von reinen Farben als Hintergrund und auch die Verwendung von Hintergrundbildern zur Erstellung von relativ komplexen Effekten.

CSS ist in dieser Hinsicht weit über HTML hinaus.

Hintergrundfarbe

Man kann verwenden background-color-EigenschaftLegen Sie den Hintergrundfarbe des Elements fest. Dieses Attribut akzeptiert jeden gültigen Farbwert.

Diese Regel setzt den Hintergrund des Elements auf Grau:

p {background-color: gray;}

Wenn Sie möchten, dass die Hintergrundfarbe weniger in die Textposition des Elements hineinreicht, müssen Sie etwas Innenabstand hinzufügen:

p {background-color: gray; padding: 20px;}

Try it yourself

Man kann die Hintergrundfarbe für alle Elemente festlegen, was einschließlich body bis hin zu Inline-Elementen wie em und a umfasst.

background-color kann nicht vererbt werden, und der Standardwert ist transparent. Transparent bedeutet "transparent". Das heißt, wenn ein Element keine Hintergrundfarbe hat, so ist der Hintergrund transparent, damit der Hintergrund des übergeordneten Elements sichtbar bleibt.

Hintergrundbild

Um ein Bild in den Hintergrund zu setzen, muss verwendet werden background-image Attribut.Der Standardwert des Attributs background-image ist none, was bedeutet, dass auf dem Hintergrund kein Bild platziert wird.

Um ein Hintergrundbild zu setzen, muss diesem Attribut ein URL-Wert zugewiesen werden:

body {background-image: url(/i/eg_bg_04.gif);}

Die meisten Hintergründe werden auf das body-Element angewendet, aber dies ist nicht der einzige Fall.

Im folgenden Beispiel wird ein Absatz mit einem Hintergrund versehen, ohne dass ein Hintergrund für andere Teile des Dokuments angewendet wird:

p.flower {background-image: url(/i/eg_bg_03.gif);}

Man kann sogar Hintergrundbilder für inline-Elemente setzen. Im folgenden Beispiel wurde ein Link ein Hintergrundbild zugeordnet:

a.radio {background-image: url(/i/eg_bg_07.gif);}

Try it yourself

Theoretisch könnte man auch die Hintergrundbilder für Ersatzelemente wie textareas und select anwenden, aber nicht jeder Benutzeragent kann diese Situation gut behandeln.

Darüber hinaus sollte noch hinzugefügt werden, dass background-image nicht vererbt werden kann. Tatsächlich können alle Hintergrundattribute nicht vererbt werden.

Hintergrundwiederholung

Wenn das Wiederverwenden des Hintergrundbildes auf der Seite erforderlich ist, kann background-repeat Attribut.

Der Wert repeat führt dazu, dass das Bild horizontal und vertikal wiederholt wird, wie dies bei der gängigen Praxis von Hintergrundbildern der Fall ist. repeat-x und repeat-y führen dazu, dass das Bild nur horizontal oder vertikal wiederholt wird, während no-repeat das Wiederverwenden des Bildes in jeder Richtung verhindert.

Standardmäßig beginnt das Hintergrundbild an der linken oberen Ecke eines Elements. Sehen Sie sich das folgende Beispiel an:

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

Try it yourself

Hintergrundposition

Man kann nutzen background-position AttributVerändern Sie den Standort des Bildes im Hintergrund.

Im folgenden Beispiel wird ein Hintergrundbild im body-Element zentriert platziert:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position: center;
  }

Es gibt viele Methoden, um Werte für das Attribut background-position bereitzustellen. Zunächst können einige Schlüsselwörter verwendet werden: top, bottom, left, right und center. Diese Schlüsselwörter treten in der Regel paarweise auf, müssen es aber nicht. Es können auch Längenwerte wie 100px oder 5cm verwendet werden, und schließlich können auch Prozentsatzwerte verwendet werden. Unterschiedliche Arten von Werten beeinflussen die Position der Hintergrundbilder unterschiedlich.

Schlüsselwörter

Die Bildplatzierungsschlüssel sind am leichtesten zu verstehen, ihr Effekt entspricht ihrem Namen. Zum Beispiel platziert top right das Bild im rechten oberen Rand des Innenabstands des Elements.

Laut den Vorschriften können Positionsschlüssel in jeder Reihenfolge auftreten, solange sie nicht mehr als zwei Schlüsselwörter enthalten - eines für die horizontale und eines für die vertikale Richtung.

Wenn nur ein Schlüsselwort angegeben wird, wird angenommen, dass das andere Schlüsselwort center ist.

Daher müssen Sie, um sicherzustellen, dass eine Bildmitte in der Oberhälfte jedes Absatzes erscheint, nur folgendes deklarieren:

p
  { 
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top;
  }

Hier sind die äquivalenten Positionsschlüsselwörter:

Einzelne Schlüsselwörter Äquivalente Schlüsselwörter
Mitte Mitte Mitte
oben oben Mitte oder Mitte oben
unten unten Mitte oder Mitte unten
rechts rechts Mitte oder Mitte rechts
links links Mitte oder Mitte links

Prozentuale Werte

Die Darstellung der prozentualen Werte ist komplexer. Angenommen, Sie möchten ein Bild im Element zentrieren, indem Sie prozentuale Werte verwenden, ist dies einfach:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

Dies führt dazu, dass das Bild angemessen positioniert wird und sein Mittelpunkt mit dem Mittelpunkt des Elements ausgerichtet ist.Mit anderen Worten, die prozentualen Werte werden gleichzeitig auf das Element und das Bild angewendet.Das bedeutet, dass der Punkt im Bild, der als 50% 50% beschrieben wird (der Mittelpunkt), mit dem Punkt im Element, der als 50% 50% beschrieben wird (der Mittelpunkt), ausgerichtet ist.

Wenn das Bild sich an 0% 0% befindet, wird der linke obere Eckpunkt im linken oberen Rand des Innenabstands des Elements platziert. Wenn die Bildposition 100% 100% ist, wird der rechte untere Eckpunkt im rechten unteren Rand des Abstands platziert.

Daher können Sie eine Bildposition horizontal in 2/3 und vertikal in 1/3 so deklarieren:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

Wenn nur ein prozentualer Wert angegeben wird, wird dieser Wert als horizontaler Wert verwendet, und der vertikale Wert wird auf 50% geschätzt. Dies ist ähnlich wie bei Schlüsselwörtern.

Die Standardwerte für background-position sind 0% 0%, was funktional mit top left gleichzusetzen ist. Dies erklärt, warum das Hintergrundbild immer vom linken oberen Rand des Innenabstands des Elements aus gestreut wird, es sei denn, Sie haben verschiedene Positionswerte festgelegt.

Length values

Length values explain the offset from the top-left corner of the padding area of the element. The offset point is the top-left corner of the image.

For example, if the value is set to 50px 100px, the top-left corner of the image will be 50 pixels to the right and 100 pixels down from the top-left corner of the padding area of the element:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

Note that this is different from percentage values, because the offset is only from one top-left corner to another top-left corner. That is, the top-left corner of the image aligns with the point specified in the background-position declaration.

Background Attachment

If the document is quite long, then when the document scrolls down, the background image will also scroll. When the document scrolls past the position of the image, the image will disappear.

You can use background-attachment propertyPrevent this scrolling. Through this property, you can declare that the image is fixed relative to the visible area (fixed), so it is not affected by scrolling:

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

Try it yourself

The default value of the background-attachment property is scroll, which means that by default, the background will scroll with the document.

CSS Background Example

Set the background color
This example demonstrates how to set the background color for an element.
Set the background color of the text
This example shows how to set the background color of part of the text.
Set the image as background
This example demonstrates how to set the image as the background.
Set the image as background 2
This example demonstrates how to set a background image for multiple elements at the same time.
How to repeat the background image
This example demonstrates how to repeat the background image.
How to repeat the background image vertically
This example demonstrates how to repeat the background image vertically.
How to repeat the background image horizontally
This example demonstrates how to repeat the background image horizontally.
How to display the background image only once
This example demonstrates how to display the background image only once.
How to place the background image
This example demonstrates how to place the background image on the page.
How to position the background image using %
This example demonstrates how to use percentages to position the background image on the page.
How to position the background image using pixels
This example demonstrates how to use pixels to position the background image on the page.
How to set a fixed background image
This example demonstrates how to set a fixed background image. The image does not scroll with the rest of the page.
All background properties are declared in one statement.
Dieses Beispiel zeigt, wie man alle Hintergrundattribute in einer Erklärung mit dem Kurzbefehl setzt.

CSS-Hintergrundattribute

Attribute Beschreibung
background Kurzformular, das die Hintergrundattribute in einer Erklärung setzt.
background-attachment Ob das Hintergrundbild fest ist oder mit dem Rest der Seite scrollt.
background-color Einstellen der Hintergrundfarbe des Elements.
background-image Das Bild als Hintergrund setzen.
background-position Einstellen der Startposition des Hintergrundbilds.
background-repeat Einstellen, ob und wie das Hintergrundbild wiederholt wird.