Workshops zu CSSScalable Vector GraphicsBilderwandWeb ServicesWeblog

Hintergründe mit CSS

Dieser Workshop setzt Grundkenntnisse in CSS voraus, was die Einbindung von Stylesheets und Positionierung von Elementen betrifft.

Mit CSS kann jedem Element eine andere Hintergrundfarbe und/oder ein eigenes Bild zugewiesen werden. In unserem Beispiel ist es die Farbe silber und eine gepunktete Linie um den Text, mit einem entsprechenden Innenabstand.

.p
{
position:relative;
left:200px;
top:10%;
background:silver;
border:1px dotted black;
padding:10px;
width:70%;
}

Weil es nun möglich ist, der Seite und auch jedem Element sowohl eine Farbe als auch ein eigenes Hintergrundbild zuzuweisen, ergeben sich höchst interessante Kombinationen, die sehr codesparend sind, noch wenig genutzt werden und extrem kurze Ladezeiten haben.

Man kann nämlich auch das Hintergrundbild beeinflussen, indem man die Art der Kachelung festlegt, aber auch die Positionierung (wenn auch eingegrenzt). Und das beste ist, dass auch der Netscape Navigator ab den 4er Versionen dieses weitgehend korrekt darstellt. Der nötige Quellcode dafür ist:

{
background-image:url(pix/smile.gif);
background-repeat:repeat-y;
background-position:40% 40%;
color:black;
}

Interessant ist hier "background-position". Das Hintergrundbild wird 40% von oben links angeordnet. Das funktioniert aber nur, wenn gleichzeitig background-repeat auf no-repeat gestellt wird.

Natürlich kann man Hintergrundbilder auch horizontal kacheln, um z.B. einen Linieneffekt zu erzielen. Und so lautet der Code:

{
left:0px;
top:10%;
border:0px;
width:100%;
background-image:url(bild.gif);
background-repeat:repeat-x;
}

Hier ist das beschriebene Beispiel.