CSS: Wiederholenden Hintergrund erstellen

Wenn du möchtest das sich der Hintergrund in CSS wiederholt dann geht das mit background:repeat. Du hast die Wahl zwischen folgenden Befehlen

Hintergrund wird Horizontal wiederholt

In diesem DIV Container wird der Hintergrund nur Horizontal wiederholt repeat-x;

<div style="background-image: url('../images/bild.jpg'); background-repeat: repeat-x;"></div>

Die URL des Bildes musst du mit deiner Bild URL ersetzen.

Hintergrund wird Senkrecht wiederholt

In diesem DIV Container wird der Hintergrund nur Senkrecht wiederholt repeat-y;

<div style="background-image: url('../images/bild.jpg'); background-repeat: repeat-y;"></div>

Hintergrund wird waagerecht und horizontal wiederholt

In diesem DIV Container wird der Hintergrund waagerecht und senkrecht. repeat;

<div style="background-image: url('../images/bild.jpg'); background-repeat: repeat;"></div>

Die URL des Bildes musst du mit deiner Bild URL ersetzen.

Klasse in CSS Datei einfügen

Alternativ kannst du natürlich den jeweilige Klasse in deine CSS Datei einfügen


/* Hintergrund wird horizontal wiederholt */

.horizontal{
background-image: url('../images/bild.jpg');
background-repeat: repeat-x;
}

/* Hintergrund wird vertikal wiederholt */

.vertikal{
background-image: url('../images/bild.jpg');
background-repeat: repeat-y;
}

/* Hintergrund wird horizontal und vertikal */

.beide-richtungen{
background-image: url('../images/bild.jpg');
background-repeat: repeat-y;
}

Über Mich


Weitere Beiträge auf Blogseite.com




Kennst du schon diese Memes?