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.

    Einmal editiert, zuletzt von D-Media (17. September 2016 um 15:42)

  • 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.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!