Das Hintergrund-Bild des Divs liegt "hinter" dem Div

[webdepp2025]

Hi!

bin totaler html-Anfänger!

ich würde gerne ein Hintergrundbild in einem Div haben.
Innerhalb des Divs möchte ich am unteren Rand ein weiteres (schmales) Bild haben, das quasi auf dem Hintergrundbild liegt.
Das Problem ist, dass ich das Hintergrundbild nicht in das Div bekomme. Es liegt ausserhalb des Divs - quasi dahinter.
Beim Scrollen bleibt es in der Bildschirmmitte und man sieht es nur im Bereich des Divs, das wie ein Fenster über den Hintergrund fährt.

Kann mir wer sagen was ich falsch mache?

html:

<div class="hintergrundundbild">
<img src="Pics/untererRanddesDivs.png"
>
</div>


css:

.hintergrundundbild {
display: flex;
align-items: end;
width: 80%;
height: 300px;
background-image: url(Pics/HintergrundBild.jpg);
background-repeat: no-repeat;
background-size: 50%;
background-attachment: fixed;
background-position: center;
}

Vielen Dank!

 

[Oliver77]

Mach doch 2 Div's draus mit Hintergrundbildern. Nicht ein Img in einem Div.

 

[webdepp2025]

Vielen Dank für deine Antwort.

Mein Problem ist ja, dass ich in mein Div kein Hintergrundbild bekomme.

Mit deinem Vorschlag hätt ich gleich die nächste Frage: Wie lege ich dann diese zwei Div's übereinander?

 

[msi]

Mein Problem ist ja, dass ich in mein Div kein Hintergrundbild bekomme.

Wenn ich raten sollte, liegt das an

background-image: url(Pics/HintergrundBild.jpg);

Ich vermute mal, dass du ein Verzeichnis css und pics hast und diese beide in einem Verzeichnis liegen. In diesem Fall muss In der CSS-Datei entweder ein relativer Pfad stehen

background-image: url(../Pics/HintergrundBild.jpg);

oder eine URL

background-image: url(https://www.example.com/Pics/HintergrundBild.jpg);

Und noch ein Tipp: verzichte auf Groß/Kleinschreibung. Auf Windows ist das egal, aber auf einem Server mit Linux ist Pics etwas anders als pics. Man sollte daher besser nur Kleinbuchstaben verwenden.

 

[Sempervivum]

Beim Scrollen bleibt es in der Bildschirmmitte und man sieht es nur im Bereich des Divs, das wie ein Fenster über den Hintergrund fährt.

Das liegt am background-attachment: fixed; , dadurch orientiert sich das Bild am Browserfenster. Wenn Du das löschst, verhält es sich wie gewünscht.

 

[Sempervivum]

@webdepp2025 Hast Du das Problem inzwischen lösen können. Eine Rückmeldung wäre nett.