E-Book Startseite Karteikarten-Programm
0

Hintergrundfarbe

Viele Webseiten haben einen Hintergrund: Hintergrundfarbe oder Hintergrundbild. Manchmal werden auch Kombinationen verwendet, das hat dann einen Vorteil bei transparenten Hintergrundbildern. Mit der Eigenschaft background-color können Sie die Hintergrundfarbe festlegen. Als Werte sind englische Farbangaben oder HEX-Angaben möglich. Um die Farbe als Hintergrund für die gesamte Seite zu bekommen, notiert man diese Eigenschaft einfach im body-Selektor. Natürlich kann die Hintergrundfarbe auch für Boxen bzw. Teile einer Webseite verwendet werden. Hier ein kleines Beispiel:


body {
    background-color: gray;
}
Anzeigebeispiel
Anzeigebeispiel



Hintergrundbild

Wie schon erwähnt haben Webseiten auch oft ein Hintergrundbild. Es ist wichtig "dezente" Hintergrundbilder zu verwenden, da es nicht unbedingt hervorstechen soll. Als Eigenschaft für die Hintergrundbilder notieren Sie background-image. Als Wert notieren Sie url() Innerhalb der Klammer können Sie das Ziel zum Bild angeben. Das Bild wird nun so oft angezeigt wie Platz auf der Seite vorhanden ist. Hier ein kleines Beispiel:

body {
    background-image: url(/Bilder/Banner_klein.jpg);
}
Anzeigebeispiel
Anzeigebeispiel



Wiederholung des Hintergrundes

Bei einem Hintergrundbild ist es möglich weitere Einstellungen vorzunehmen, wie z. B. der sogenannte "Wiederholungseffekt". Standardweise werden Bilder so oft wiederholt (sowohl waagrecht als auch senkrecht) wie breit und hoch der Bildschirm ist. Innerhalb der Eigenschaft background-repeat können Sie folgende Werte eintragen: repeat (waagrecht und senkrecht unendlich wiederholen), repeat-x (eine Zeile waagrecht wiederholen), repeat-y (eine Spalte senkrecht wiederholen) und no-repeat (waagrecht und senkrecht nicht wiederholen - Bild nur einmal Anzeigen).

body {
    background-image: url(/Bilder/Banner_klein.jpg);
    background-repeat: repeat-x;
}
Anzeigebeispiel
Anzeigebeispiel



Wasserzeichen des Hintergrundes

Man kann bei Hintergrundbildern einen sogenannten Wasserzeichen-Effekt hinzufügen, dass bedeutet ein Bild scrollt mit dem Text mit oder es bleibt immer am gleichen Ort stehen (wird oft bei Shopsystemen für den "Kassenzettel" verwendet, sodass man den Kassenzettel immer im Blick hat). Um diesen Vorgang zu nutzen, benötigen Sie die folgende Eigenschaft: background-attachment Als Wert verwenden Sie scroll (Bild scrollt mit dem Text mit) oder fixed (Bild bleibt stehen). Hier ein Beispiel bei dem beide Möglichkeiten angewendet werden:

#bereich1 {
    width: 400px;
    background-image: url(/Bilder/Banner_klein.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    float: left;
}
 
#bereich2 {
    width: 400px;
    background-image: url(/Bilder/Banner_klein.jpg);
    background-repeat: no-repeat;
    background-attachment: scroll;
    float: right;
}
Anzeigebeispiel
Anzeigebeispiel



Hintergrundposition

Nun gibt es noch als Einstellung die Hintergrundposition. Diese Einstellung eignet sich vor allem bei nur einem Hintergrundbild. Als Eigenschaft verwenden Sie background-position. Als Werte sind nummerische Angaben möglich. Der 1. Wert steht für den horizontalen Abstand zur linken Ecke. Der 2. Wert steht für die vertikale Position. Zusätzlich dürfen noch andere Angaben gemacht werden: top (obenbündig), right (rechtsbündig), bottom (untenbündig), left (linksbündig) und center (zentriert). Wenn nur center angegeben wird gilt das nicht nur vertikal sondern auch horizontal. Technisch gesehen dürften Sie aber auch "center center" angeben.

body {
    background-image: url(/Bilder/Banner_klein.jpg);
    background-repeat: no-repeat;
    background-position: 150px 300px;
}
Anzeigebeispiel
Anzeigebeispiel



Hintergrund (allgemeiner Befehl)

Als letzten Befehl für den Hintergrund gibt es noch den "allgemeinen Befehl". Im allgemeinen Befehl für Hintergründe kann man alle Hintergrundeinstellung mit nur einer Eigenschaft (background) einstellen. Die Reihenfolge ist bei diesem Befehl glücklicherweise egal und Sie müssen auch nicht alle Angaben notieren. Dem Browser ist dies egal ob Sie z. B. die Hintergrundposition weglassen. Hier ein Beispiel:

body {
    background: url(/Bilder/Banner_klein.jpg) repeat-y 150px 300px;
}
Anzeigebeispiel
Anzeigebeispiel



Transparenz

Nun wollen wir weitermachen mit dem Thema Transparenz bzw. Deckkraft. Die folgende Funktionen sind nur in CSS3 (!) möglich. Es gibt insgesamt 2 Möglichkeiten wie man Elementen Transparenz hinzufügen kann. Als erstes sollten wir aber zwischen den Begriffen unterscheiden: Deckkraft (auch Undurchsichtigkeit genannt) gilt für ein komplettes Objekt (Hintergrund, Bild, etc. und Schrift). Bei der Transparenz hingegen gilt es beispielsweiße nur für den Hintergrund und nicht für die Schrift. Als erstes wollen wir die Deckkraft erklären. Die Deckkraft kann mit opacity festgelegt werden. Innerhalb dieser Eigenschaft dürfen werde zwischen 0 (keine Deckkraft) und 1 (komplette Deckkraft) angegeben werden. Komma-Werte müssen, wie immer nicht mit Komma sondern, mit Punkt angegeben werden. Interessant ist dies Funktion vor allem dann, wenn sich einzelne Elemente überlappen. Hier ein kleines Beispiel: Der erste Code ist CSS und der 2. HTML:

body {
    background: url(/Bilder/Banner_klein.jpg) repeat 50px 50px;
}
 
#box {
    background-color: red;
    color: yellow;
    font-family: sans-serif;
    font-size: 90px;
    width: 500px;
    height: 500px;
    padding: 10px;
    position: absolute;
    top: 100px;
    left: 100px;
    opacity: 0.3;
}
<div id="box">Eigenschaft: "opacity"</div>
Anzeigebeispiel
Anzeigebeispiel


HSV-Farbmodell Weiter geht es mit der eigentlichen Transparenz. Diese Funktion ist leider relativ kompliziert, da Sie dazu Erfahrung mit dem Farbkreis und Farbkegel benötigen. Als Hilfe zum Verständnis haben wir hier für Sie einen Farbkegel dargestellt. Der Unterschied ist, dass die Transparenz im Gegensatz zu der Einstellung der alleinigen Angabe der Deckkraft, die Transparenz an keine untergeordnete Elemente (z. B. Text) vererbt wird. Die eigentliche Transparenz wird nicht als eigenständige Eigenschaft notiert, sondern mit dem HSLA-Farbschema bei der Hintergrundfarbe (background-color). Es gibt bei den HSLA-Farbangaben vier Werte: Der 1. Wert legt den Farbton fest (Winkel H vom Farbkreis - z. B. 180° bedeutet Cyan). Der 2. Wert legt die Sättigung fest (Prozentangabe S HSV-Farbmodell Winkelübersicht zur Mitte des Farbkreises - z. B. 100% vollständige Sättigung). Der 3. Wert legt die Helligkeit fest (Prozentangabe V von der Helligkeit der Farbe - z. B. 0% ist schwarz). Als 4. Wert wird nun die Deckkraft angegeben (opacity). Dabei dürfen die gleichen Zahlen verwendet werden wie oben bereits genannt. Die vier Werte werden in der Klammer des Wortes hsla eingesetzt. Die vier Werte müssen ebenfalls mit Komma getrennt werden (siehe Beispiel unten). Hier ein Beispiel (1. Code CSS - 2. Code HTML):

body {
    background: url(/Bilder/Banner_klein.jpg) repeat 50px 50px;
}
 
#box {
    background-color: hsla(220, 90%, 60%, 0.4);
    color: yellow;
    font-family: sans-serif;
    font-size: 90px;
    width: 500px;
    height: 500px;
    padding: 10px;
    position: absolute;
    top: 100px;
    left: 100px;
}
<div id="box">Eigenschaft: Transparenz mit hsla</div>
Anzeigebeispiel
Anzeigebeispiel


Bild-Copyright:
» Der Farbkegel ist ein Werk des Wikipedia-Users "Moongateclimber" und steht unter der Creative Commons Attribution-Share Alike 3.0 Unported Lizenz. Weitere Informationen zur Datei finden Sie unter http://commons.wikimedia.org/wiki/File:HSV_cone.png
» Die Farbtonskala ist ein Werk des Wikipedia-Users "Kalan" und steht unter der Public Domain Lizenz. Weitere Informationen zur Datei finden Sie unter http://commons.wikimedia.org/wiki/File:HueScale.svg


Design:
 


Logo
Benjamin Jung
Krummstr. 9/3
73054 Eislingen

E-Mail: info@homepage-webhilfe.de
Webseite: www.homepage-webhilfe.de