CSS: Wiederholenden Hintergrund erstellen

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
smileys

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?


Das könnte dich interessieren!

Weitere Kategorien






Schreibe einen Kommentar



26157