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 2008-2009   1keydata.com   Alle Rechte vorbehalten.



  • CSS Tutorial
    CSS Syntax
    Apply CSS
    CSS Ausgabearten
    CSS Cascade
    CSS Vererbung
    CSS Class ID
    CSS Div Span
    CSS Längeneinheiten

    CSS Box-Modell
    CSS Margin
    CSS Border
    CSS Padding
    CSS Background
    CSS Color
    CSS Font
    CSS Link
    CSS List
    CSS Table
    CSS Position
    CSS Text
    CSS Float
    CSS Clear
    CSS Cursor

    CSS Codes