Hintergrundbild wechseln

[Walchi]

Einen schönen Guten Abend,

ich bräuchte bitte Hilfe - habe ein Problem mit JavaScript. Bin hier noch eher Anfänger - sorry ...

Ich habe eine Seite, wo ein Hintergrundbild drin ist. Dies ist in der .html-Seite wie folgt eingebunden:

Code:

<div class="header_image"><script>var headImage =    "assets/images/Header_Tom/Winter/Winterspass_Header.jpg";</script>
<picture>
     <source media="(min-width:661px)" 
         srcset="assets/images/Header_Tom/Winter/Winterspass_Header-gross.jpg">
     <source media="(max-width:660px)" srcset="assets/images/Header_Tom/Winter/Winterspass_Header-
         klein.jpg">
     <img id="headImageImg" src="img/px.webp" data-src =
          "assets/images/Header_Tom/Winter/Winterspass_Header-gross.jpg" alt="" width="2000"   
           height="1000"/>
</picture>
<link href="assets/images/Header_Tom/Winter/Winterspass_Header-gross.jpg" rel="preload" as="image" media="(min-width:661px)"/>
<link href="assets/images/Header_Tom/Winter/Winterspass_Header-klein.jpg" rel="preload" as="image" media="(max-width:660px)"/></div>

So weit, so gut. In der Picture-Section wird das Hintergrundbild gesetzt - beim Bild Header-groß handelt es sich um ein 1000 x 500 er Bild, heruntergerechnet, was auf den 2000 x 1000 eingesetzt wird. Also ein unscharfes erstes Bild.

Gesetzt ist auch eine Variable headImage, wo das endgültige Foto mit den 2000 x 1000 drin ist.
Nach dem Laden der Seite sollte eine Function einfach den src auf das neue Foto austauschen. Das geht nicht.

Mein Versuch dazu (mal zum probieren als Click-Button drauf - kommt dann als Onload-Function rein) :

Code:

<p id="demo">JavaScript can change HTML content.</p>

<script>
function loadBild() {
var _name = headImage;
window.alert(_name);
_name = document.getElementById("headImageImg").src;                            
window.alert(_name);
picture = new Image();
picture.src = "assets/images/Header_Tom/Zimmer/Dachstein_Header-gross.jpg";    
document.getElementById("headImageImg").src = picture.src;
_name = document.getElementById("headImageImg").src;                            
window.alert(_name);
}
</script>

<button type="button" onclick='loadBild();document.getElementById("demo").innerHTML = "Hello JavaScript - Aufruf ist erfolgt"'>Click Me!</button>

Sorry, der Code ist durch das viele Probieren und den vielen window.alert drin verwirrend, aber dadurch sehe ich, dass der Code durchläuft und die Variablen passen. Im einzelnen passiert hier :

Am Anfang habe ich nur geschaut, ob in der Variable headImage der Wert drin ist. Ist für mich nur ein Test.
 
Dann mache ich ein new(Image), und lade das Foto, das ich drin haben will. Damit ich sicher sein kann, dass das Foto da ist und geladen ist, habe ich hier ein anderes Foto genommen, als in der Endversion. Und zwar eines, das auf der Website bereits drauf ist. Das muss ja dann schon geladen sein.

Dann weise ich dem Hintergrundbild die .src des Fotos zu.
Die window.alert sagen mir, dass sich der .src-Wert ändert. 

Aber das Bild bleibt gleich. Ich könnte mir vorstellen, dass ein Hintergrundbild anders in der Seite eingebettet ist als ein normales Foto. Und ich hier den Hintergrund neu zeichnen muss? Oder was kann schuld sein.

Die Seite ist als Versuchsseite scharf, und zwar hier:
https://www.alpenhof.com/de/preise/winte...spass.html

Was mache ich falsch? Ist ja eigentlich eine einfache Übung, aber ich stecke.

Danke für Eure Hilfe,

LG Walchi