Einzelne Verzierungen auf dem gesamten Hintergrund von Webseite

[Ombra]

Hallo zusammen,

Ich habe auf meiner Webseite ein Hintergrundbild. Ich möchte einzelne selbst-gezeichnete Ornamente in transparent/weiß über dem Hintergrundbild zufällig verteilen (wenn es geht sogar immer wieder neu-zufällig).

Weiß jemand wie das geht?

Danke im Voraus

 

[lachender_engel]

Weiß jemand wie das geht?

Bestimmt!

 

[Jormungand]

Eine zufällige Verteilung geht da nicht. Das müsste schon in z.B. JavaScript umgesetzt werden.
Wenn du die aber selbst platzierst, kannst du z.B. einige absolute Container erstellen und hinter den Text legen.

 

[Myhar]

Wenn du die aber selbst platzierst, kannst du z.B. einige absolute Container erstellen und hinter den Text legen.

Und wozu braucht man dafür container?

 

[Jormungand]

Braucht man nicht. Aber es ist aufgeräumter.

 

[Myhar]

Nein, aufgeräumter ist es, wenn man nicht unnötige HTML-Elemente verwendet.
Man kann ohne Probleme mehrere Hintergrundbilder für ein Element definieren, die überlagern sich dann natürlich auch dementsprechend. Damit kann man das angesprochene Problem lösen, abgesehen vom Zufallselement, das muss, wie schon angesprochen, mit Javascript umgesetzt werden. Mehrere (leere) Elemente sind hier nicht zu empfehlen.

 

[pixelmaker]

abgesehen vom Zufallselement,

Ich bin etwas raus aus dem Thema, weil ich schon lange nichts mehr mit css gemacht habe. Zu dem Thema fällt mir ein das man mehrere Bilder mit Transparenzen übereinander positionieren kann, das wären die Ornamente (z-index: xxx).
Man kann diese Bilder mit css verschieben, transform: translate(X-Wert, Y-Wert);
Bei Transformationen gibt es den Wert random (Zufall)
img:hover {
-webkit-transform: rotate( random(-5, 5)deg); // erzeugt einen Zufallswinkel zwischen -5 und +5
-moz-transform: rotate( random(-5, 5)deg); // erzeugt einen Zufallswinkel zwischen -5 und +5
}

Man müsste also mit random Zufallswerte für die Koordinaten erzeugen können die die übereinander geschichteten Bilder bei jedem pageload neu anordnen. Das geht also nur mit CSS ohne ein Javascript.
Mal abgesehen davon ob es sinnvoll ist oder nicht.


grüße

 

[Aelfry]

Bei Transformationen gibt es den Wert random (Zufall)
img:hover {
-webkit-transform: rotate( random(-5, 5)deg); // erzeugt einen Zufallswinkel zwischen -5 und +5
-moz-transform: rotate( random(-5, 5)deg); // erzeugt einen Zufallswinkel zwischen -5 und +5
}

Man müsste also mit random Zufallswerte für die Koordinaten erzeugen können die die übereinander geschichteten Bilder bei jedem pageload neu anordnen. Das geht also nur mit CSS ohne ein Javascript.

Wie kommst du denn auf den Unsinn?! Hast du deinen code vorher ausprobiert?

Zufallswerte nur über CSS sind nicht möglich. Funktioniert nur über etwas wie JavaScript oder PHP.
(alternativ sei noch ein präprozessor wie sass erwähnt, wobei man damit nicht beim jedem pagereload neue Werte hat)