CSS Intro Bilderwechsel

  • Hallo liebe Forengemeinde!


    Ich habe eine Frage: Wie kann man anhand CSS einstellen dass sich das Introbild alle 5 Sekunden ändert?


    Hier mein code:




    .intro {
    width:100%;
    position:relative;

    background: url(../img/header-bg.jpg) no-repeat top center;


    }

  • Danke für die Antwort, funkt aber nicht..


    Suche einen Code, der das Bild im CSS hat und dass das Bild nach 5 Sekunden wechselt.

  • Hm, darf ich fragen, warum diese Variante nicht infrage kommt?


    Ansonsten könnte ich mir noch vorstellen, dass ein Bild, wo alle Bilder des Sliders nebeneinander aufgereiht sind, per CSS eingebunden werden könnte und die einzelnen Bilder in dem Bild dann per background-position ausgewählt werden könnten. Bin mir aber nicht sicher, ob das geht. Musst du mal ausprobieren, wenn du verstehst, was ich meine.

  • Funkt beides nicht, hier mein Code:


    - HTML -




    <section id="intro" class="intro">

    <div class="slogan">
    <h2>Willkommen,<span class="text_color"></span> </h2>
    <h4>bei der ...</h4>
    </div>
    <div class="page-scroll">
    <a href="#angebote" class="btn btn-circle">
    <i class="fa fa-angle-double-down animated"></i>
    </a>
    </div>
    </section>
    <!-- /Section: intro -->
    CSS -



    .intro {
    width:100%;
    position:relative;


    background: url(../img/header-bg.jpg) repeat top center;


    }



    Möchte es so verändern, dass es eine slideshow wird.

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von D-Media ()

  • Muss auch gestehen dass es ein Template ist.


    <section id="intro" class="intro">

    <div class="slogan">
    <h2>Willkommen,<span class="text_color"></span> </h2>
    <h4>bei der....</h4>
    </div>
    <div class="page-scroll">
    <a href="#angebote" class="btn btn-circle">
    <i class="fa fa-angle-double-down animated"></i>
    </a>
    </div>
    </section>
    <!-- /Section: intro -->


    dann halt der CSS Code.

  • Hier ist es: http://codepen.io/jr-cologne/pen/WGxaQV



    Ist jetzt erstmal sehr einfach, aber es funktioniert auf jeden Fall. :)


    Bei Fragen, einfach fragen.



    Edit: Mir fällt leider gerade auf, dass nur Chrome die Animierung von background-image unterstützt. :(


    Du müsstest dementsprechend also leider auf eine der anderen Möglichkeiten zurückgreifen.

    Dieser Beitrag wurde bereits 2 Mal editiert, zuletzt von JR Cologne ()