Wer auf seiner Website gerne einen strukturierten Hintergrund verwenden möchte, kommt oft nicht daran vorbei, dies mit Bildern umzusetzen. Diese rauben natürlich Speicherplatz und verlängern die Ladezeiten der Seite enorm. In diesem Artikel möchte ich Euch zeigen, wie Ihr das mittels background-repeat bewusst komprimieren könnt.
Wie funktioniert das ganze?
Nun, der Sinn der Sache ist einfach, dass es sehr platzraubend ist, wenn man ein komplettes Bild in hoher Auflösung für den Hintergrund der Website verwendet. Aus diesem Grund werden wir uns einen kleinen Bereich des Bildes aussuchen und diesen kacheln bzw. in der Vertikalen und Horizontalen wiederholen. Das Ganze funktioniert problemlos mit der CSS-Anweisung background-repeat.
Der Hintergrund
Das Bild unten soll mein Hintergrund werden. Natürlich ist es so von der Datenmenge viel zu groß.
Aus dem Bild werde ich mir nun einen kleinen Bereich herausschneiden, welches ich via CSS in alle Richtungen kacheln werde.
Es handelt sich um Folgenden:
Der Code
html {
background:url(Pfad/Foto.jpg) 0 0 repeat;
}
Ich spreche zum Definieren meines Hintergrundbildes html an. In der zweiten Zeile verweise ich auf den Pfad meines Bildes, sage dem Browser wo es platziert werden soll (mit „0 0“ bewirken wir hier, dass es oben links platziert wird.) und das Entscheidende: „repeat“. Damit sagen wir dem Browser, dass dieses Bild in alle Richtungen wiederholt werden soll.
[buttonw]Beispiel anschauen![/buttonw]
Was aber, wenn ich ein Bild nur in der Horizontalen oder Vertikalen wiederholen möchte?
Dann muss die Anweisung nur minimal geändert werden. Um ein Bild in der Horizontalen zu wiederholen, gibt man „repeat-x“ an, für die Vertikale „repeat-y“. Außerdem kann mit der Breite und Höhe gespielt werden. Mit max-width oder max-height kann angegeben werden, bis wann sich das Element wiederholen soll.
Wer Fragen hat darf sehr gerne die Kommentarfunktion nutzen.
Hey Daniele, vielen Dank :p, coole Webseite im Übrigen die Du da hast.
Grüße aus Südhessen
Lieben Dank, Michaela! 🙂
Grüße aus Saarbrücken.
Hallo Daniele,
ich habe mir soeben Deinen Artikel „Bilder Kacheln mit CSS“ durchgelesen. Ursprünglich komme ich aus der NewsPaper Branche und war deswegen auch oft bei der Saarbrücker Zeitung und in Trier. Schon in den 80iger Jahren war mir klar, dass ich die hohe Reistätigkeit durch Europa nicht ständig machen kann und habe mich in Verbindung zu meinem Job ständig mit verschiedenen Programmiersprachen beschäftigt. Heute ist es vorwiegend PHP, MySQL, JavaScript und alles was zur Erstellung von CMS-Portalen gehört. Design war nie meine Stärke, aber ich versuche es zu lernen. Auch das Fotografieren und erstellen von Videos sind eigene Berufszweige. Wer sich mit dem Internet beruflich befaßt muß sich wohl mit all diesen Themen auseinandersetzen. Danke für Deinen Artikel. Ich mag es kurz und präzise. Hier ist meine erste Homepage: http://www.mrc-online.de – Ich arbeite mit dem CMS openEngine 2.0, weil es dem Programmierer sehr viele Möglichkeiten bietet, strukturiert zu arbeiten. Ich freue mich über eine Antwor von Dir. – Viele Grüße aus dem Spessart-Odenwald, Matthias
Hallo Matthias,
danke für Deinen Kommentar, klingt alles sehr interessant!
Viele Grüße,
Daniele