Wechselndes Hintergrundbild mit Fade Effekt (nicht IE tauglich)

  • Ich habe mal ein Projekt erstellt wo man sich ein wechselndes Hintergrundbild erstellen kann.
    Das ganze läuft nicht perfekt im Internet Explorer dieser spult alle Bilder schnell hintereinander ab und bleibt dann stehen.


    Also wir benötigen eine JS Datei...


    diese hat folgenden Inhalt ist aber im Testprojekt auch vorhanden.



    Dann brauchen wir noch eine CSS Datei:



    Diese beiden Dateien binden wir in den HEAD Teil der Seite ein - wenn auf allen Seiten dann unter Punkt 1 - wenn nur auf bestimmten Seiten dann unter Eigenschaften der Seite.Und dann noch ein bißchen was für den Internet Explorer


    HTML
    1. <link rel="stylesheet" type="text/css" href="css/style1.css" media="screen, print" />
    2. <script type="text/javascript" src="js/modernizr.custom.45139.js"></script>
    3. <!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="de"> <![endif]-->
    4. <!--[if IE 7 ]> <html class="ie ie7 no-js" lang="de"> <![endif]-->
    5. <!--[if IE 8 ]> <html class="ie ie8 no-js" lang="de"> <![endif]-->
    6. <!--[if IE 9 ]> <html class="ie ie9 no-js" lang="de"> <![endif]-->
    7. <!--[if gt IE 9]><!--><html class="no-js" lang="de"><!--<![endif]-->


    Natürlich müssen wir die Ordnerangabe auch richtig setzen sonst klappt das nicht.


    Das ganze reicht jetzt noch nicht, wir müssen noch ein bißchen HTML mit einbringen - das schreiben wir AUCH in den Head der Seite!!!



    Das alles ist jetzt auf 6 Bilder ausgelegt.


    Eine Testseite habe ich auch mal gemacht...das Testprojekt befindet sich im Anhang...

  • Bei mir lädt sie im FF zu Ende aber dafür geht sie in Opera garnicht... naja heut klappt auch garnix - bei der Template Erstellung bin ich heut fast verzweifelt und habs dann einfach sein gelassen... Der Footer hing im im Contentbereich egal welche Einstellung ich genommen habe...

  • Danke für die Codes. Ich habe noch eine Frage.


    Wozu dient dieser Code und die Pattern.png Datei?


    CSS
    1. .cb-slideshow:after {
    2. content: '';
    3. background: transparent url(../images/pattern.png) repeat top left;
    4. }


    Desweiteren habe ich das Problem, das


    HTML
    1. <li><span>Image 01</span></li>
    2. <li><span>Image 02</span></li>
    3. <li><span>Image 03</span></li>
    4. <li><span>Image 04</span></li>
    5. <li><span>Image 05</span></li>
    6. <li><span>Image 06</span></li>


    6 Schwarze Punkte oben links auf der html Datei erzeugen. Das Background image ist auch nicht ganz oben. Irgendwelche Tips?


    Aber noch viel wichtiger, der Background liegt im Vordergrund und überdeckt alles an Text was im Body Bereich ist. Nur beim Fading sieht man kurz den Text.



    Danke

  • oh sorry das Thema wollt ich eigentlich entfernen. Denn das ganze funktioniert in einigen Browser nicht bis garnicht. Das Bedarf ein paar mehr Änderungen...


    Ich habe aber hier mal was ähnliches gemacht. Gibt im Template Bereich auch die passende Vorlage für.

  • Kannst Du mir wenigstens noch sagen, ob es eine Möglichkeit gibt, das bei einer Tabelle cellspacing="22" cellpadding="22" auch angezeigt wird. Irgendwie scheint bleibt alles bei 0 :(


    Ich habe also eine Tabelle eingefügt, bei der der Hintergrund eine Opal.png sein soll. Funktioniert auch aber der Text in der Tabelle ist zu dicht am Rand trotz cellspacing="22" cellpadding="22".


    Könntest Du mit ein zip. schicken, wo Du Deine neue Programmierung drin hast. Ist das Wordpress?


    Vielen Dank, Oli

  • Am besten schreibst du mal einen Link zur Seite - da kann ich mir das besser anschauen und testen.


    Ja das Template gibt es als Wordpress Template aber auch als HTML Template.


    Aber das Projekt hier ist ein X5 Projekt.


    Edit: ich seh gerade du hast Version 8 in deinem Profil angegeben....da muss ich wirklich mal auf deine Seite schauen um dir was fertiges liefern zu können...

  • Du hast Version 9. Aber da nicht die aktuelle. Aktualisiere mal auf die neueste Version.


    Das oben vorgestellte brauchst du nicht weiter zu probieren.


    Ich werde demnächst versuchen so etwas wieder zu machen suche nur noch eine Möglichkeit die in allen Browsern funktioniert....

  • Hallo,


    ich habe Testweise den Backroundfader in meine neue Seite eingebaut, soweit so gut, funktioniert bis auf einen Fehler. Ich habe auf der Seite einen Footer, der ist ebenfalls mit einem Backroundimage ausgerüstet. Durch das Faden des Websitehintergrundbildes blendet sich nun der Hintergrund des Footer ebenfalls aus und wieder kurz ein. Der Hintergrund des Footer soll aber nicht faden bzw. aus- u. einblenden sondern immer zu sehen sein. Das Footer BG-Image holt er sich aus einer CSS raus, siehe Word-Doument im Anhang.


    Wie kann ich das lösen? Ich füge hier mal den gesamten Quellqode der index.html ebenfalls als Word mal mit an.



    Kann mir jemand helfen? Wäre super, denn die neue Site soll am 01.01.2014 online gehen.


    Vielen Dank vorab.


    Grüße Denny

    Dateien

    • css.doc

      (55,81 kB, 2 Mal heruntergeladen, zuletzt: )
    • index.doc

      (45,57 kB, 1 Mal heruntergeladen, zuletzt: )
  • Bitte Quelltext direkt hier rein schreiben




    Auf den ersten Blick würde ich sagen da ist noch mehr mit drin was ich nicht deuten kann.
    Dieses Thema wollte ich eigentlich wieder löschen wie ich oben schon geschrieben hatte. Daraufhin ist aber das supersized Thema entstanden. Welches besser funktioniert.


    Solche Fehler muss man direkt auf der Seite sehen ich kann das nicht so nachvollziehen.

  • Ich hab die Seite mal zum anschauen und zum Livetest auf ein Testverzeichnis geladen:


    #mce_temp_url#


    dort kann man sehen das sich die Hintergrundgrafik des Footer auch ein- u. ausblendet. Was ich noch nicht verstehe ist, warum der Seitenhintergrund beim faden auch einmal weiß wird...

  • Seh ich ja jetzt erst...ist ja alles nicht mit Website X5 erstellt.


    Deine Klasse bg1 musst du mall positionieren und den z-index vergeben



    also


    CSS
    1. .bg1 {position: relative; z-index: 2;}


    Dann bleibt der auch stehen.


    Das weiß werden liegt am fehlenden Bild


    CSS
    1. .cb-slideshow li:nth-child(3) span {
    2. background-image: url(../images/fade/bg3.jpg);
    3. -webkit-animation-delay: 12s;
    4. -moz-animation-delay: 12s;
    5. -o-animation-delay: 12s;
    6. -ms-animation-delay: 12s;
    7. animation-delay: 12s;
    8. }