CSS 2.1 und CSS3 – Hintergrund Eigenschaften

Posted in Allgemeines, CSS, CSS3, Snippet on 10/10/2011 04:41 by Hoegerl_Karl

Mit Cascading Style Sheets werden Inhalte von dem Design getrennt. Dadurch lassen sich leicht Designänderungen vornehmen, ohne dass Texte und Bilder einer Webseite neu erstellt werden. Wir betrachten hier auch die Möglichkeiten von Cascading Style Sheet Version 3 ( CSS3 ). CSS3 befindet sich zur Zeit in der Entwicklung und wird teilweise von den aktuellen Browsern unterstützt.

Wir beginnen mit den Hintergrundeigenschaften, die sich mit CSS bieten. Als Voreinstellung ist der Hintergrund transparent. Er kann aber auch mit einer Hintergrundfarbe gefärbt werden.

Hintergrundfarbe mit CSS

Beispiel mit HTML Tag body:
…
body { background-color:#E0E0E0; }
…

Die Webseite erhält mit Hilfe des Tags “body“  mit background-color einen hellgrauen Hintergrund.

Beispiel mit externer CSS Datei:

HTML Webseite:

<!DOCTYPE HTML>
<html>
  <head>
  <meta http-equiv=”content-type” content=”text/html; charset=utf-8″>
  <title>Hintergrundfarbe mit CSS</title>
 
  <!– Mit Hilfe der externen CSS Datei “background.css” –>
  <link rel=”stylesheet” href=”Default.css” type=”text/css”>
 
  </head>
  <body>
     Die Webseite mit eingef&auml;rbten Hintergrund …
  </body>
</html>

 

 CSS Datei:

/* CSS Document */

/* Beispiel 1 mit Datei “background.html” */
body {
    background: #f0e68c;
}

 

Ergebnis:

Hintergrundfarbe mit CSS Datei

Hintergrundfarbe einer Webseite mit CSS

 

Hintergrundbild mit CSS

Beispiel mit HTML Tag body:
…
body { background-image: url(pfad/bilddatei.jpg); }
…

Ähnlich kann mit dem CSS Befehl background-image und der Angabe eines Pfades zu einer Bilddatei ein Hintergrundbild eingeblendet werden.

Beispiel mit externer CSS Datei:

HTML Webseite:

<!DOCTYPE HTML>
<html>
  <head>
  <meta http-equiv=”content-type” content=”text/html; charset=utf-8″>
  <title>Hintergrundbild mit CSS</title>
 
  <!– Mit Hilfe der externen CSS Datei “background-image.css” –>
  <link rel=”stylesheet” href=”background-image.css” type=”text/css”>
 
  </head>
  <body>
     Die Webseite mit Hintergrundbild …
  </body>
</html>

 

 CSS Datei:

/* CSS Document */

/* Beispiel 1 mit Datei “background-image.html” */
body {
    background-image: url(images/auto.jpg);
}

 

Ergebnis:

background-image with CSS

background-image with CSS

 

Mehrere Hintergrundbilder mit CSS3

Beispiel mit CSS Datei:

…
background-image: url(pfad/hintergrund.jpg), url(pfad/baum.jpg), url(pfad/himmel.jpg);
background-position: center center, 30% 70%, top center;
background-origin: border-box, content-box, border-box;
background-repeat: no-repeat, no-repeat, no-repeat;
…

 

background-image

Mit background-image werden die drei Bilder für den Hintergrund geladen.

 

background-position

Durch background-position wird die Position der einzelnen Bilder eingestellt. “center center” gilt für das erste Bild, “30% 70%” für das Zweite und “top center” für das dritte Bild.

Dazu gibt es weitere Parameter

  [ top | bottom ]
oder
  [ <percentage> | <length> | left | center | right ]
  [ <percentage> | <length> | top | center | bottom ]
oder
  [ center | [ left | right ] [ <percentage> | <length> ] und
  [ center | [ top | bottom ] [ <percentage> | <length> ]

 

background-origin

Bei Elementen die nur in einer Box erzeugt werden ist der Befehl background-origin nicht notwendig. Unser Beispiel hat aber drei Elemente. Dazu gibt es drei Parameter.

padding-box

Die Position der aktuellen padding-box ist relativ zur letzten padding-box gesetzt.

 border-box

Die Position der aktuellen border-box ist relativ zur letzten border-box gesetzt.

content-box

Die Position der aktuellen content-box ist relativ zur letzten content-box gesetzt.

 

background-repeat

Der Befehl background-repeat bestimmt, wie ein Bild wiederholt wird.

repeat

Das Bild wird so oft wiederholt bis der verfügbare Platz ausgefüllt ist. Es können auch Teile des Bildes sichtbar sein.

space

Das Bild wird so oft wiederholt bis der verfügbare Platz ausgefüllt ist. Es werden nur vollständige Bilder angezeigt.

round

Durch round wird das Bild so oft wiederholt bis der verfügbare Platz ausgefüllt ist. Es werden nur vollständige Bilder angezeigt und gegebenenfalls das Ausgangsbild in der Größe angepasst.

no-repeat

Mit no-repeat wird das Bild in der ausgewählten Richtung (Horizontal oder Vertikal) nur einmal angezeigt.

 

HTML Webseite:

<!DOCTYPE HTML>
<html>
  <head>
  <meta http-equiv=”content-type” content=”text/html; charset=utf-8″>
  <title>Hintergrundbild mit CSS</title>
 
  <!– Mit Hilfe der externen CSS Datei “more-background-images.css” –>
  <link rel=”stylesheet” href=”more-background-images.css” type=”text/css”>
 
  </head>
  <body>
     Die Webseite mit mehreren Hintergrundbildern …
  </body>
</html>

 

 CSS Datei:

/* CSS Document */

/* Beispiel 1 mit Datei “more-background-images.html” */
body {
    background-image: url(images/auto.jpg);
   
  background-image: url(images/auto.jpg), url(images/endy.jpg), url(images/auto.jpg);
  background-position: center center, 30% 70%, top center;
  background-origin: border-box, content-box, border-box;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

 

Ergebnis:

Mehrere Hintergrundbilder mit CSS 3

Mehrere Hintergrundbilder mit CSS 3

 

Zuletzt aktualisiert von .