HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum |
 

 
 

Anzeige 
 
               Forum
 
 
HTMLWorld » CSS » Farbe und Hintergrundgestaltung

CSS: Farbe und Hintergrundgestaltung

von Jan Winkler

Die Gestaltung von Dokumenten und Seiten kann einerseits durch Farben (z.B. Textfarbe) und andererseits durch die Gestaltung des Hintergrundes weiter verfeinert und verbessert werden. Auch CSS unterstützt diese Formen der Gestaltung. Dazu wurden die folgenden Eigenschaften definiert:

Anzeige

CSS Level 1 color  nach oben

Die color-Eigenschaft beschreibt die (Vordergrund-)Farbe des in einem Element enthaltenen Textes. Als Wert wird dazu der Wert der Farbe, der Farbname oder eine andere Farbangabe notiert. Beispiel:

BODY { color: black; }
H1 { color: '#ff0000'; }
H2 { color: rgb(0,0,255); } 

CSS Level 1 background-attachment  nach oben

Die background-attachment-Eigenschaft definiert, wie ein Hintergrundbild eingepasst wird. Als Wert stehen 2 Varianten zur Verfügung: scroll besagt, dass das Hintergrundbild mit verschoben werden soll, wenn die Seite bzw. das Element gescrollt wird (Voreingestellt). fixed besagt, dass das Hintergrundbild am gleichen Platz stehen bleiben soll.
Beispiel:

BODY { background-attachment: fixed; 
       background-image: url('name.gif'); } 

CSS Level 1 background-color  nach oben

Zum Bestimmen der Hintergrundfarbe eines Elements dient die background-color-Eigenschaft. Als Wert wird hier eine Farbe oder transparent notiert. transparent bedeutet, dass die Farben des darunterliegenden Elements angenommen werden bzw. das Element durchscheinend ist. Beispiel:

BODY { background-color: '#ff0099'; }
P { background-color: transparent; } 

CSS Level 1 background-image  nach oben

Das Hintergrundbild eines Elements wird mit der background-image-Eigenschaft definiert. Als Wert muss entweder die URL eines Bildes oder none notiert werden. none beschreibt, dass kein Bild dargestellt werden soll. Beispiel:

BODY { background-image: none; }
DIV { background-image: url('name.jpg'); } 

CSS Level 1 background-position  nach oben

Die background-position-Eigenschaft beschreibt, wo (an welcher Stelle des Elementhintergrundes) sich das Hintergrundbild befinden soll. Dazu wird ein Wertepaar notiert. Der erste Wert dieses Paares bestimmt dabei die horizontale Ausrichtung; der zweite Wert die vertikale Ausrichtung. Beide Werte setzen an der linken oberen Ecke des Elements ihren Nullpunkt. Als Werte dieses Wertepaares können die folgenden notiert werden:

  • Prozentangabe - Richtet das Hintergrundbild prozentual an der Elementfläche (horizontal oder vertikal) aus.
  • Länegmaße - Richtet das Hintergrundbild mit dem definierten Abstand (horizontal oder vertikal) aus.
  • center - Richtet das Hintergrundbild mittig (horizontal oder vertikal) aus.
  • bottom - Richtet das Hintergrundbild am unteren Rand des Elements aus. (nur vertikal)
  • left - Richtet das Hintergrundbild am linken Rand des Elements aus. (nur horizontal)
  • right - Richtet das Hintergrundbild am rechten Rand des Elements aus. (nur horizontal)
  • top - Richtet das Hintergrundbild am oberen Rand des Elements aus. (nur vertikal)

Die (logische) Kombination dieser Werte als ein Wertepaar bestehend aus horizontaler und vertikaler Angabe ist möglich. Werden Prozent- oder Längenangaben getätigt, muss der horizontale Wert als erstes stehen. Ist dies nicht der Fall, können die Werte vertauscht werden. Einige Beispiele für Kombinationen dieser Werte:

  • left top oder top left gleichbedeutend mit 0% 0%
  • right top oder top right gleichbedeutend mit 100% 0%
  • center oder center center gleichbedeutend mit 50% 50%
  • right bottom oder bottom right gleichbedeutend mit 100% 100%

Des Weiteren können auch Prozent- mit Längen- oder Richtungsangaben kombiniert werden. Beispiel:

BODY { background-position: 27% 3cm; }
P { background-position: right 88%; }
TABLE { background-position: 3cm bottom; } 

Microsofts CSS background-position-x und background-position-y  nach oben

Die Eigenschaften background-position-x und background-position-y gehören zu den eigens von Microsoft eingeführten Eigenschaften. Mit ihnen ist die Ausrichtung des Hintergrundbildes möglich. Mit background-position-x kann die horizontale Ausrichtung, genauer gesagt den Abstand zur linken Seite, des Hintergrundbildes bestimmt werden. background-position-y bestimmt die vertikale Ausrichtung; also den Abstand nach oben. Als Wert können die folgenden dienen:

  • Längenangabe - Definiert den genauern Abstand des Hintergrundbildes
  • Prozentangabe - Definiert den Abstand in Prozent der Objektbreite bzw. -höhe
  • center - Ausrichtung in der Mitte
  • left - Ausrichtung am linken Rand (Nur bei background-position-x).
  • right - Ausrichtung am rechten Rand (Nur bei background-position-x)
  • bottom - Ausrichtung am unteren Rand (Nur bei background-position-y)
  • top - Ausrichtung am oberen Rand (Nur bei background-position-y)

Beispiel:

<body style=" background-position-x:20px;
              background-position-y:20px;
              background-repeat:no-repeat; "
              background="name.gif">
...
</body> 

CSS Level 1 background-repeat  nach oben

Die background-repeat-Eigenschaft beschreibt, ob und wie das Hintergrundbild wiederholt werden soll. Als Werte stehen die folgenden zur Auswahl:

  • no-repeat - Das Hintergrundbild wird einmal an der vorgegebene Stelle gezeichnet. Ist der Anzeigebereich des Elements größer als das Bild, so wird der Rest des Anzeigebereichs mit der Hintergrundfarbe bzw. dem darunterliegenden Element gefüllt.
  • repeat - Das Hintergrundbild wird an der vorgegebene Stelle gezeichnet. Ist der Anzeigebereich des Elements größer, so wird das Bild horizontal und vertikal dazu kopiert/angesetzt. Das Bild wird so oft wiederholt, bis der Anzeigebereich gefüllt ist.
  • repeat-x - Das Hintergrundbild wird an der vorgegebene Stelle gezeichnet. Ist der Anzeigebereich des Elements größer, so wird das Bild nur horizontal dazu kopiert/angesetzt. Das Bild wird so oft wiederholt, bis es den Anzeigebereich einmal horizontal vollständig durchläuft. Der Rest des freien Anzeigebereiches wird mit der Hintergrundfarbe bzw. dem darunterliegenden Element gefüllt.
  • repeat-y - Das Hintergrundbild wird an der vorgegebene Stelle gezeichnet. Ist der Anzeigebereich des Elements größer, so wird das Bild nur vertikal dazu kopiert/angesetzt. Das Bild wird so oft wiederholt, bis es den Anzeigebereich einmal vertikal vollständig durchläuft. Der Rest des freien Anzeigebereiches wird mit der Hintergrundfarbe bzw. dem darunterliegenden Element gefüllt.

Beispiel:

BODY { background-repeat: repeat-y; } 
P { background-repeat: no-repeat; } 

CSS Level 1 background  nach oben

Die background-Eigenschaft ist ein Zusammenschluss aus den oben genannten Hintergrund-Eigenschaften (außer color). Sie dient dazu, alle Werte dieser Eigenschaften in Kurzform definieren zu können, ohne dazu die langen Eigenschaftsnamen mit notieren zu müssen. Als Werte wird der Wert einer oder mehrerer der o.g. Eigenschaften notiert. Die Werte werden dabei durch Leerzeichen voneinander getrennt. Die Reihenfolge sollte grundsätzlich egal sein, da es sich um unterschiedliche Werte-Arten handelt, eine geordnete Reihenfolge ist aber nicht minder gut. Die Reihenfolge sollte, wenn möglich, diesem Schema entsprechen:

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

Beispiel:

BODY { background: red url('name.gif') left 50%; }
P { background: transparent url('hinterg.gif') repeat-x; } 



« zurück weiter »
Bewerten

 

CSS

.Autor:Jan Winkler.
. Bewertung:
CSS: Farbe und Hintergrundgestaltung HTMLWorld
(5/5 bei 1 Votes)
.
. Community: 450 Beiträge im CSS Forum .

Navigation

Images verschiedener Größe gleich anpassen von Alphavader
Seite verzerrt bei anderen Auflösungen. von Gorgomir
img Stretcher auf fluid Div Container von Thunder1985
Dropdown Menu unter den header von Harburger1887
Kreis um Buchstabe... von karinsch
footer unten platzieren von Alex...
css-anfaengerin - schreibschutz von css-tempate entfernen von kiloberta
Programmierer in Festanstellung oder Freiberuflich gesucht von GP.1226
Button Formatierungs Problem mit Transparentem Hintergrund von redlin
Runde Ecken IE 8 / ohne JavaScript und BG Bilder? von kamikaetzelein
3 Div Elemente ausrichten von Kanikkl
Bilder werden nur im IE angezeigt von Schmido
Contentinhalt vor Linkstruktur im Seitenquelltext von tbtip
Browserunterschiede in Darstellung von CrazyPlaya
Wie sollte ich das aufbauen? von Reelay

zum CSS Forum »


 
     
 

Anzeige