[Suche] HTML Code 2 Layer parallax scrolling [erledigt]

Hallo liebe Community !

Da ich mich nicht gut mit HTML auskenne und den folgenden Code nicht richtig verstehe, so wollte ich euch einmal fragen, wie dieser Aufbau eigentlich funktioniert und wie man den Code noch optimieren könnte.

Ich habe nur begrenzten Zugriff auf die Website, wo ich den Code einfügen kann (nur ein Kästchen) und darum bin ich mir nicht so sicher, was ich der verstelle und wieso ganz bestimmte Fehler auftreten. Es geht um den folgenden HTML Code ...

<img rel="nofollow" src="" style="background-repeat: no-repeat;background-size: cover;background-position: 0em 0px;margin-left: -13em;margin-right: 0;margin-top: 0em;margin-bottom:0em;width:100vw;" target="_blank">
<ul target="_blank" style="border:4px background-attachment:fixed;background-image: url(https://i.imgur.com/Platzhalter1.png);background-attachment: fixed; background-repeat:no-repeat; background-size:100%;background-position:0em 0px;margin-left: -10em; margin-right: -10; margin-top:2em; " rel="nofollow"><br><p style="border: none; background:none; background-image:none; background-position:center top ;width: 100%; padding: 0px;border-radius: 3px; margin-top:2em;  ;margin-right: auto; margin-right:auto;  text-align: center; text-shadow: 0 0 2px#ffffff, 0 0 5px#ffffff, 0 0 20px #ffffff; font-size:20px; line-height: 20px;  font-family:Poster;" target="_blank" rel="nofollow"><br target="_blank" rel="nofollow"><br><img border="0" src="https://i.imgur.com/Platzhalter2.png"  target="_blank" rel="nofollow">

Was ich mit dem Code erreichen möchte ist, das 2 Bilder mit Paralaxscrolling auf der Seite erscheinen. Das bedeutet 1 Bild als Hintergrund, welches starr bleibt und sich nicht bewegt und das 2 Bild soll scrollen, wenn ich mit der Maus runter und rauf gehe auf der Website. Das Bild im Vordergrund sind Texte und Grafiken und das Hintergrundbild ist nur eine einzelne Grafik (Muster).

Das Problem an dem Code ist jedoch, das das Bild über dem Hintergrund in einer Art Rahmen steckt und deshalb jede Menge Platz links und rechts ist. Ich würde gerne erreichen, das ich für das Bild im Vordergrund mehr Breite zur Verfügung habe und das sich die Grafik auch automatisch an den Bildschirm anpaßt.

Also wenn ich meinen Browser verkleinere, dann sollte das Bild quasi mit skalieren. Ich habe auch schon ein wenig umhergespielt mit dem Code und eine Kleinigkeit geändert, aber wenn ich nun im geänderten Code den Browser verkleinere, dann schiebt der das Vordergrundbild links und rechts außerhalb des Bildschirms.

Der geänderte Code lautet:

<img rel="nofollow" src="" style="background-repeat: no-repeat;background-size: cover;background-position: 0em 0px;margin-left: -13em;margin-right: 0;margin-top: 0em;margin-bottom:0em;width:100vw;" target="_blank">
<ul target="_blank" style="border:4px background-attachment:fixed;background-image: url(https://i.imgur.com/Platzhalter1.png);background-attachment: fixed; background-repeat:no-repeat; background-size:100%;background-position:0em 0px;margin-left: -10em; margin-right: -10; margin-top:2em; " rel="nofollow"><br><p style="border: none; background:none; background-image:none; background-position:center top ;width: 100%; padding: 0px;border-radius: 3px; margin-top:2em;  ;margin-right: auto; margin-right:auto;  text-align: center; text-shadow: 0 0 2px#ffffff, 0 0 5px#ffffff, 0 0 20px #ffffff; font-size:20px; line-height: 20px;  font-family:Poster;" target="_blank" rel="nofollow"><br target="_blank" rel="nofollow"><br><img border="0" src="https://i.imgur.com/Platzhalter2.png"  target="_blank" rel="nofollow">

Könnt ihr mir bitte dabei helfen, den Code so zu ändern, das ich am Ende 2 Bilder habe mit Paralaxscrolling und mehr Platz links und rechts für das Bild im Vordergrund und das die komplette Grafik sich dem Browserfenster mit anpaßt, wenn dieser zu klein ist ?

Für den Code 1 ist mein Bild nur 1080x3000 gewesen, aber ich brauche unbedingt 2000x3000 wegen der Breite und mehr Platz für das Bild über dem Hintergrund (Texte, Grafiken ...).

01.png 02.png 2023.04.17 Bild 01.png

Also der Code 1(siehe unten) von mir geht, aber ich möchte daran etwas ändern. Ich habe den Code allerdings nicht erstellt, sondern so im Internet gefunden. Auf den Bildern oben sieht man, was ich als Ergebnis haben möchte (grundlegend).

Es sollen also 2 Layer sein, wovon sich einer bewegt (Vordergrund) und der andere (Hintergrund) nicht. Dadurch entsteht eine gewisse Simulation, die ich möchte, also das Paralax-Scrolling.

Mein Problem ist allerdings nun, der Layer "Vordergrund" zu wenig Platz bietet und zwar nicht so wie auf der Grafik oben, denn die ist nur zur Veranschaulichung gedacht. Was ich gerne möchte ist, das der Layer "Vordergrund" verbreitert wird im Code UND das sich beide Layer an den Bildschirm anpassen.

Aktuell passen sich bei meinem Code die beiden Layer nur ein wenig an, aber wenn das Fenster kleiner wird als 1.370 Pixel, dann verschieben sie die beiden Layer merkwürdig.

Im Code 2 (siehe unten) ist genau das gleiche, nur das ich da an 2 Werten rumgespielt habe. Das Ergebnis war zwar mehr Platz links und rechts auf dem Layer "Vordergrund" ,aber so bald ich meinen Browser aus dem Vollbild nehme (verkleiner) ,dann verschiebt sich der Layer "Vordergrund" merkwürdig rechts außerhalb des Bildschirms.

Ich habe außerdem nur die Möglichkeit in 1 Fenster den Code zu schreiben (siehe Anhang schwarzes Bild) und somit keinen Zugriff auf den Header, oder sonstwas. Der ganze Code muß also wie auf dem Bild zusehen ist, in den Kasten rein.

Das ist was ich eigentlich erklären wollte und wobei ich Hilfe bräuchte .

Wenn also jemand mir mit dem Code helfen könnte, oder einen ganz neuen kennt, der besser für dieses Anwendungsbeispiel passen würde, dann wäre ich sehr dankbar für eine Lösung, des Problems.



CODE 2 (Problem)
================

<img rel="nofollow" src="" style="background-repeat: no-repeat;background-size: cover;background-position: 0em 0px;margin-left: -13em;margin-right: 0;margin-top: 0em;margin-bottom:0em;width:100vw;" target="_blank">
<ul target="_blank" style="border:4px background-attachment:fixed;background-image: url(https://i.imgur.com/Vordergrund.png);background-attachment: fixed; background-repeat:no-repeat; background-size:100%;background-position:0em 0px;margin-left: -20em; margin-right: -20; margin-top:1em; " rel="nofollow"><br><p style="border: none; background:none; background-image:none; background-position:center top ;width: 100%; padding: 0px;border-radius: 3px; margin-top:1em;  ;margin-right: auto; margin-right:auto;  text-align: center; text-shadow: 0 0 2px#ffffff, 0 0 5px#ffffff, 0 0 20px #ffffff; font-size:20px; line-height: 20px;  font-family:Poster;" target="_blank" rel="nofollow"><br target="_blank" rel="nofollow"><br><img border="0" src="https://i.imgur.com/Hintergrund.png"  target="_blank" rel="nofollow">

CODE 1 (geht aber zu wenig Platz links und rechts):
====================================

<img rel="nofollow" src="" style="background-repeat: no-repeat;background-size: cover;background-position: 0em 0px;margin-left: -13em;margin-right: 0;margin-top: 0em;margin-bottom:0em;width:100vw;" target="_blank">
<ul target="_blank" style="border:4px background-attachment:fixed;background-image: url(https://i.imgur.com/Hintergrund.png);background-attachment: fixed; background-repeat:no-repeat; background-size:100%;background-position:0em 0px;margin-left: -10em; margin-right: -10; margin-top:2em; " rel="nofollow"><br><p style="border: none; background:none; background-image:none; background-position:center top ;width: 100%; padding: 0px;border-radius: 3px; margin-top:2em;  ;margin-right: auto; margin-right:auto;  text-align: center; text-shadow: 0 0 2px#ffffff, 0 0 5px#ffffff, 0 0 20px #ffffff; font-size:20px; line-height: 20px;  font-family:Poster;" target="_blank" rel="nofollow"><br target="_blank" rel="nofollow"><br><img border="0" src="https://i.imgur.com/Vordergrund.png"  target="_blank" rel="nofollow">

Vielen herzlichen Dank für die Mühe mit deinem HTML-Code.

Leider funktioniert der Code nicht, wenn ich meine Bilder da in die Platzhalter einfüge, denn dann bekomme ich nur den Text "Test Scrolling Container" zusehen und nichts weiter.

Es handelt sich dabei um eine Website, auf der man nur einen Bereich ausfüllen kann, ähnlich wie bei einer Single-Börse. Dort habe ich nur einen Kasten "Über mich" und "Wunschliste" und da kann ich dann einen HTML-Code einfügen. Als Beschreibung steht unter der Box vom Betreiber der Website der folgende Hinweis "Du kannst einige HTML-Tags verwenden (a p i strong b u ul ol li h1 h2 h3 img font br span).".

Das bedeutet, das ich nicht irgendwo CSS-Code woanders speichern kann, oder auch nichts in einen Header der Website schreiben kann. In anderen Profilen sehe ich auch schöne Designs und da ist noch viel mehr möglich, mit Änderung des Mauszeigers und klickbaren Flächen innerhalb eines Banners (nicht der ganze Banner) und vieles mehr.

Alles müßte also wie bei "CODE 1" in diesen Kasten rein, was ja auch geht. Ich möchte halt eben gerne meine Änderungen durchführen.

Ich habe versucht folgendes einzufügen und jedes mal sehe ich nur einen Text "Test Scrolling Container" und nichts weiter.

Code Versuch 1:

<!DOCTYPE html>
<html lang="de">


<head>
<meta charset="utf-8" />
<title>Test Scrolling Container</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<style>
html,
body {
height: 200vh;
}


body {
background-image: url(images/https://i.imgur.com/BILD1.png);
background-size: cover;
background-attachment: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-position: center center;
}


main {
height: 150vh;
width: 80%;
background-image: url(images/https://i.imgur.com/BILD2.png);
background-size: cover;
background-position: center center;
}
</style>
</head>


<body>
<main>


</main>
</body>


</html>

Code Versuch 2:

<!DOCTYPE html>
<html lang="de">


<head>
<meta charset="utf-8" />
<title>Test Scrolling Container</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<style>
html,
body {
height: 200vh;
}


body {
background-image: url(https://i.imgur.com/BILD1.png);
background-size: cover;
background-attachment: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-position: center center;
}


main {
height: 150vh;
width: 80%;
background-image: url(https://i.imgur.com/BILD2.png);
background-size: cover;
background-position: center center;
}
</style>
</head>


<body>
<main>


</main>
</body>


</html>

Ich habe dir einmal einen HTML-Code erstellt mit gültigen Links zu imgur.
Da ich nicht weiß, welches Bild vorne ist und welches hinten mußt du vielleicht beide LINKS ev. tauschen, sonst siehst du nur das Hintergrund Wallpaper und nicht den Text der darüber sein sollte.

Ich vermute es wird eher an der Art des HTML-Code liegen, also das die Website ihn nicht versteht, oder er zu komplex ist. Vielleicht sollte er wirklich wesentlich simpler ausfallen, so wie oben in meinem Beitrag erwähnt.

Dein HTML-Code mit imgur Links:

<!DOCTYPE html>
<html lang="de">




<head>
<meta charset="utf-8" />
<title>Test Scrolling Container</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<style>
html,
body {
height: 200vh;
}




body {
background-image: url(https://i.imgur.com/Jt0KdZi.png);
background-size: cover;
background-attachment: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-position: center center;
}




main {
height: 150vh;
width: 80%;
background-image: url(https://i.imgur.com/kYaSmEg.png);
background-size: cover;
background-position: center center;
}
</style>
</head>




<body>
<main>




</main>
</body>




</html>

Mein HTML-Code (der geändert werden muß):

<img rel="nofollow" src="" style="background-repeat: no-repeat;background-size: cover;background-position: 0em 0px;margin-left: -13em;margin-right: 0;margin-top: 0em;margin-bottom:0em;width:100vw;" target="_blank">
<ul target="_blank" style="border:4px background-attachment:fixed;background-image: url(https://i.imgur.com/Bild1.png);background-attachment: fixed; background-repeat:no-repeat; background-size:100%;background-position:0em 0px;margin-left: -10em; margin-right: -10; margin-top:2em; " rel="nofollow"><br><p style="border: none; background:none; background-image:none; background-position:center top ;width: 100%; padding: 0px;border-radius: 3px; margin-top:2em;  ;margin-right: auto; margin-right:auto;  text-align: center; text-shadow: 0 0 2px#ffffff, 0 0 5px#ffffff, 0 0 20px #ffffff; font-size:20px; line-height: 20px;  font-family:Poster;" target="_blank" rel="nofollow"><br target="_blank" rel="nofollow"><br><img border="0" src="https://i.imgur.com/Bild2.png"  target="_blank" rel="nofollow">

Grüß dich hallo und vielen Dank für den geänderten Code.
Wenn ich den so einfüge mit meinen 2 Bildern, dann habe ich keine Hintergrund mehr.
Es ist komisch zu erklären ...

Wenn ich den "Hintergrund" über mein Bild lege (nicht sinnvoll), dann kann ich den "Hintergrund" sehen, aber wenn ich den "Hintergrund" nach unten lege, so wie es sein sollte, dann ist er verschwunden, aber mein Bild ist sichtbar.

Ich habe 2 Ebenen => 1x Hintergrund und 1x Grafik+Text (in 1 Bild)

Beispiel 1:
Hintergrund oben (verdeckt alles andere)
Grafik+Text drunter

Ergebnis => Hintergrund sichtbar


Beispiel 2:
Grafik+Text oben
Hintergrund drunter

Ergebnis => Hintergrund verschwunden

Das heißt irgendwas stimmt da immer noch nicht, denn so habe ich als Ergebnis entweder keinen "Hintergrund" ,oder der Hintergrund liegt ÜBER allem und verdeckt den Rest (sinnfrei).

Ich will damit sagen, das ich die beiden Stellen im Code ausprobiert und mehrfach getauscht habe, aber der Hintergrund ist entweder verschwunden, oder überdeckt alles

background-image: url(https://i.imgur.com/kYaSmEg.png)
<img src="https://i.imgur.com/Jt0KdZi.png">

Also aktuell habe ich den Code von dir so eingetragen schau bitte einmal rein, ob das so stimmt.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Test Scrolling Container</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<style>
html,
body {
height: 200vh;
}
body {
background-image: url(https://i.imgur.com/kYaSmEg.png);
background-size: cover;
background-attachment: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-position: center center;
}
img {
width: 80%;
}
</style>
</head>
<body>
<img src="https://i.imgur.com/Jt0KdZi.png">
</body>
</html>

Dort sehe ich den Hintergrund nicht, oder nur den Text. Ich habe beide Links auch mal getauscht und entweder verdeckt der Hintergrund den Vordergrund, oder er ist nicht sichtbar.

Vordergrund das hier => https://i.imgur.com/Jt0KdZi.png
Hintergrund sollte das sein => https://i.imgur.com/kYaSmEg.png


2023.04.25 Bild 06.png

Ja genau, das ist das kleine Fenster, wo ich meinen Code einfügen darf.

Die Demo von deinem Link ist genau was ich möchte.
Der "Hintergrund" ist diese Lederoptik und im "Vordergrund" soll der Text "hallo ich bin ein Text" stehen. Wenn man auf der Seite nach unten scrollt, dann sollte sich nur der "Vordergrund" bewegen und der Hintergrund starr bleiben.

Wenn ich allerdings den folgenden Code von dir verwende, dann passiert es, das der Hintergrund entweder gar nicht zusehen, sondern nur "hallo ich bin ein Text" und wenn ich die Links tausche im Code, dann sehe ich den "Hintergrund" fälschlicherweise als "Vordergrund" und den Text "hallo ich bin ein Text" nicht mehr.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Test Scrolling Container</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<style>
html,
body {
height: 200vh;
}
body {
background-image: url(https://i.imgur.com/kYaSmEg.png);
background-size: cover;
background-attachment: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-position: center center;
}
img {
width: 80%;
}
</style>
</head>
<body>
<img src="https://i.imgur.com/Jt0KdZi.png">
</body>
</html>

Vielen lieben Dank für den geänderten Code !
Ja jetzt funktioniert er richtig, schau ...

2023.04.27 Bild 40.png

Das Problem ist nun allerdings, das der Abstand links "NEBEN" dem eingetragenen Code größer ist, als rechts.
Ich habe mal ein paar Linien "reingemalt" um zu verdeutlichen was ich damit meine ... schau

2023.04.27 Bild 40.png

Es war super, wenn links genauso "wenig" Abstand ist, wie rechts im Bild, damit ich viel mehr Platz haben für mein Design innerhalb des Codes "auf" dem "Hintergrund".

Vielen lieben Dank für deine ganze Mühe bisher !
Ich hoffe, das wir es gemeinsam schaffen können den Code so umzuschreiben, das die dumme Website ihn auch akzeptiert 😅.

Wenn ich dir irgendwie hier eine PN senden könnte, dann würde ich dir auch gerne mehr dazu sagen, denn es gibt Dinge, die kann ich hier nicht öffentlich reinschreiben (privat).