nicht angemeldet
Hintergrundbild
0 
Matthias Scharwies
0 0 0 0 0 0 
marctrix
Hintergrundbild
Hey, auf der Seite qwellcode fand ich die Idee mit dem Hintergrund interessant. Jetzt aber ohne Canvas(denke, dass es das ist^^). Wie ist das ganze zu lösen?
-
Servus!
Hey, auf der Seite qwellcode fand ich die Idee mit dem Hintergrund interessant.
interessant ist vielleicht wirklich das richtige Wort!
Jetzt aber ohne Canvas(denke, dass es das ist^^).
Ja, habe bestimmt 2 min gebraucht, um mich mit dem Seiteninspektor bis zur passenden Stelle durchzukämpfen:
<aside class="intro"> <img src="images/backgrounds/references_placeholder.jpg" alt="Qwellcodes berühmtes Jeff-Hintergrundbild" data-segment="references"> </aside>wird per JS durch ein canvas-Element ersetzt:
<aside class="intro"> <div id="particles-js" style="display: block;"> <canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;" width="1834" height="910"> </canvas> </div>Wie ist das ganze zu lösen?
Na ja, mit canvas und viel JavaScript. Braucht's des?
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste-
Na die ganzen "Partikel" von Canvas möchte ich ja gar nicht haben. Ich hätte nur gerne gewusst, wie ich den Hintergrund so fixiere, dass er immer da bleibt und nicht beim scrollen verschwindet
-
Hallo Mika,
du brauchst:
background-attachment:fixed;Wenn dich das Thema interessiert, schau mal hier: https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Hintergrundfarben_und_-bilder/background-attachment
Bis bald!
Meowsalot (Bernd)-
Das ganze habe ich schon ausprobiert. Da bleibt es ja an der Position, aber ich will es ja als Hintergrundbild auf der ganzen Seite, sodass es immer da bleibt^^
-
Hallo Mika,
und warum gibst du dann nicht dem <body> ein Hintergrundbild? Dann hast du es auf der ganzen Seite und die rechtlichen Bereich liegen dadrüber.
Bis bald!
Meowsalot (Bernd)-
Das ganze habe ich mal in Codepen geschrieben. Dort konnte mir das nicht richtig anzeigen-.- Jetzt habe ich es einfach mal in einem Editor gemacht. Dann ging es. Trotzdem danke
-
Hej Mika,
Jetzt habe ich es einfach mal in einem Editor gemacht. Dann ging es.
Mit Hintergrundbildern kannst du noch viel mehr machen.
Auch mehrere Hintergrund-Bilder sind möglich und mit etwas Geschick sind da tolle Effekte möglich.
Gerade jetzt wieder beliebt (bitte nicht für Parallax-Scrolling-Fakes nutzen, das triggert Migräne und Erbrechen): Eric Meyers Beispiel, was man mit background-attachment: fixed und mehreren Bildern tolles machen kann.
Marc
-
-
-
-
-
-