Bildwechsler des Hintergrundbildes bei überlagerten Bildern

[sunshineh]

Hallo

ich habe mir folgendes Tutorial angesehen und möchte im Grunde auch nach einer bestimmten Zeit ein Bild wechseln, aber eben nur das unterste Hintergrundbild.

Der Code meiner überlagerten Bilder sieht so aus:

      .headerimg {
       background-image: url(img/header/logo.png), url(img/header/header-mask.png), url(img/header/Header1.jpg);
       background-repeat: no-repeat, no-repeat, no-repeat;
       background-position: center, top, top;
       background-size: 380px, 140%, 140%;
       padding: 45px;
       height: auto;
     }

Ich möchte zeitlich das "img/header/Header1.jpg"-Bild wechseln.

Wenn ich nun den Tutorial-Code nehme und statt eines normalen "Nürnberg-Bildes" mein ".headerimg" einfüge, erscheint leider NUR das Hintergrundbild, die Maske und das Logo nicht mehr. Auch kann ich die Bildgröße nicht einstellen.

Was mach ich falsch bzw. wie ist es zu realisieren?

[Edit: Code formatiert. Andreas/MudGuard]

[MudGuard]

Hi,

ich habe mir folgendes Tutorial angesehen

folgt leider nicht. ==> keiner außer Dir kennt den HTML-Code zu Deinem CSS-Schnippsel.

Wenn ich nun den Tutorial-Code nehme und statt eines normalen "Nürnberg-Bildes" mein ".headerimg" einfüge, erscheint leider NUR das Hintergrundbild, die Maske und das Logo nicht mehr.

Wie fügst Du das denn ein? So, daß die beiden anderen Bilder auch wieder eingetragen sind?

Oder setzt Du einfach nur background-image: url(deinNeuesBild); Dann wäre es kein Wunder, wenn die beiden anderen Bilder verschwinden.

cu,
Andreas a/k/a MudGuard

[sunshineh]

Hallo hier testweise der HTML-Code:

  <h1>Bildwechsler mit CSS-animation 2</h1>
  <main>
  	<h2>Ein Tag in Nürnberg</h2>
  	<figure id="gallery">
  		<figure> <div class="headerimg"></div>
  		</figure>
  		<figure> <img src="//wiki.selfhtml.org/images/b/b9/Burg-in-N%C3%BCrnberg-2.jpg" alt="Blick auf Kaiserburg in der Mittagszeit - eigene Aufnahme">
  			<figcaption>mittags</figcaption>
  		</figure>
  		<figure> <img src="//wiki.selfhtml.org/images/f/fd/Burg-in-N%C3%BCrnberg-3.jpg" alt="Blick auf Kaiserburg am Abend- eigene Aufnahme">
  			<figcaption>abends</figcaption>
  		</figure>
  		<figcaption>Die Bilder zeigen die Kaiserburg in Nürnberg zu verschiedenen Tageszeiten.</figcaption>
  	</figure>
  </main>

Ich dachte, ich kann einfach ein Bild der Animation ersetzen durch deine definierte Klasse.

Edith sagt, das ist html-code