Bildwechsler - bekonmme ihn nicht zum Laufen

sunshineh

Hallo,

ich möchte auf meiner Webseite das Hintergrundbild im Header immer wieder ändern. Das soll so einfach wie möglich funktionieren, entweder jedes Mal wenn auf der Seite was geklickt wird, oder vielleicht alle 30 Sekunden.

Den Code habe ich viel folgt in mein PHP-File eingefügt:

HTML

<div class="headeri">
      <style>
      .headerimg1 {
       background-image: url(img/header/logo.png), linear-gradient(90deg,  rgba(0, 0, 0 , 1) 0%, rgba(168, 185, 209, 0.0)  59%,  rgba(0, 0, 0 , 1) 90%), url(img/header/Header1.jpg);
       background-repeat: no-repeat, no-repeat, no-repeat;
       background-position: center center, top, top;
       background-size: 340px, 150%, 150%;
       padding: 40px;

     }
     @media (max-width: 400px){
       .headerimg1 {
         background-size: 250px, 180%, 180%;
         background-position: center center, top, top;
     }
     }

     .headerimg2 {
      background-image: url(img/header/logo.png), linear-gradient(90deg,  rgba(0, 0, 0 , 1) 0%, rgba(168, 185, 209, 0.0)  59%,  rgba(0, 0, 0 , 1) 90%), url(img/header/Header2.jpg);
      background-repeat: no-repeat, no-repeat, no-repeat;
      background-position: center center, top, top;
      background-size: 340px, 150%, 150%;
      padding: 40px;

    }
    @media (max-width: 400px){
      .headerimg2 {
        background-size: 250px, 180%, 180%;
        background-position: center center, top, top;
    }
    }

    .headerimg3 {
     background-image: url(img/header/logo.png), linear-gradient(90deg,  rgba(0, 0, 0 , 1) 0%, rgba(168, 185, 209, 0.0)  59%,  rgba(0, 0, 0 , 1) 90%), url(img/header/Header3.jpg);
     background-repeat: no-repeat, no-repeat, no-repeat;
     background-position: center center, top, top;
     background-size: 340px, 150%, 150%;
     padding: 40px;

   }
   @media (max-width: 400px){
     .headerimg3 {
       background-size: 250px, 180%, 180%;
       background-position: center center, top, top;
   }
   }
<figure id="gallery">
             <div class="headerimg1"></div>
             <div class="headerimg2"></div>
            <div class="headerimg3"></div>
</figure>

Alles anzeigen

Nun werden die 3 Bilder untereinander angezeigt. Nur wie muss ich den CSS-Code anpassen, damit die Bilder übereinander gelagert sind und sich abwechseln?

Ich habe schon verschiedenes versucht, leider erfolglos.

Sailor

Das könnte was für dein Problem sein...

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Bildwechsler

sunshineh

Ja von dieser Seite habe ich den Code - nur bekomme ich es mit deren CSS-Code nicht zum Laufen. Ich möchte es so einfach wie möglich umsetzen.

Sempervivum

Mit CSS-Animation kann man auch Hintergrundbilder wechseln und sogar schön überblenden:

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Animation

Ich hatte da vor ein paar Tagen für eine andere Frage ein Demo gemacht:

Code

#bgchanger {
            height: 200px;
            width: 300px;
            background-size: cover;
            background-position: center;
            animation: ani 3s linear infinite;
        }

        @keyframes ani {
            0% {
                background-image: url(images/dia0.jpg);
            }

            15% {
                background-image: url(images/dia0.jpg);
            }

            33.5% {
                background-image: url(images/dia1.jpg);
            }

            66.5% {
                background-image: url(images/dia1.jpg);
            }

            67% {
                background-image: url(images/dia2.jpg);
            }

            100% {
                background-image: url(images/dia2.jpg);
            }
        }

Alles anzeigen

Jetzt mitmachen!