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;
}

Hat dir der Beitrag gefallen?

Domi

Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite

Das könnte dich interessieren!

Weitere Kategorien