CSS-Hintergrund (Background)


CSS Tutorial  >  Hintergrund

Gebräuchliche Arten zur Bestimmung von Hintergrundeigenschaften in CSS sind wie folgt:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

    Weiter unten wird jede einzelne erläutert:

    background-color

    Die background-color-Eigenschaft definiert die Farbe des Hintergrunds.

      CSS-Statement  Ausgabe

      p {background-color: 00FF00;}  


      Grüner Hintergrund  

      p {background-color: red;}  


      Roter Hintergrund  

    background-image

    Die background-image-Eigenschaft gibt an, welches Hintergrundbild benutzt werden soll.

    CSS-StatementAusgabe

    p {background-image:url(yp.jpg);}

    Mit Hintergrundbild


    background-repeat

    Die background-repeat-Eigenschaft gibt an, ob ein kleines Hintergrundbild wiederholt dargestellt werden soll. Die Vorgabe ist "repeat", dies bedeutet, dass das Bild in x- und y-Richtungen wiederholt wird. Sie können auch manuell x-repeat, y-repeat, oder no-repeat bestimmen.

    Beispiele:

    CSS-StatementAusgabe

    p {
      background-image:url(yp.jpg);
      background-repeat: no-repeat;
    }

    Hintergrundbild wiederholt sich nicht.


    p {
      background-image:url(yp.jpg);
      background-repeat: repeat-x;
    }

    Hintergrundbild wiederholt sich horizontal.


    p {
      background-image:url(yp.jpg);
      background-repeat: repeat-y;
    }

    Hintergrundbild wiederholt sich vertikal.


    p {
      background-image:url(yp.jpg);
      background-repeat: repeat;
    }

    Hintergrundbild wiederholt sich in beide Richtungen.


    background-attachment

    Die background-attachment-Eigenschaft gibt an, ob ein Hintergrundbild fest auf dem Bildschirm positioniert sein soll. Mögliche Werte sind „fixed” (Hintergrundbild bleibt beim Bildlauf in der gleichen Position ) und „scroll“ (Hintergrundbild bewegt sich mit dem Rest des Inhalts beim Scrolling).

    Hier sind zwei Beispiele:

    body { background-attachment: fixed;
      background-image: url("yp.jpg");
      background-repeat: no-repeat;
    }
    body { background-attachment: scroll;
      background-image: url("yp.jpg");
      background-repeat: no-repeat;
    }

    background-position

    Die background-position-Eigenschaft definiert die Position des Hintergrunds. Mögliche Werte sind.

    • Eine Kombination von [top, center, bottom] und [left, center, right].
    • Zwei Prozentwerte: Der erste Wert gibt den horizontalen prozentualen Anteil und der zweite gibt den vertikalen prozentualen Anteil an.
    • Zwei Positionswerte: Der erste Wert ist die absolute horizontale Position, der zweite ist die absolute vertikale Position.

    Beispiele:

    body { background-image: url("yp.jpg");
      background-repeat: no-repeat;
      background-position: center center;
    }
    body { background-image: url("yp.jpg");
      background-repeat: no-repeat;
      background-position: 20% 20%;
    }

    Folgende Seite: CSS Color



    Copyright © 2024   1keydata.com   Alle Rechte vorbehalten