• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

background slideshow

L

lungentorpedo

Neues Mitglied
halllo,
Habe mit css und animation eine slideshow im hintergrund des body elements gemacht leider funktioniert das nur in 'chrome'.
MEINE WEBSITE: aqua-wirbellose.de

hier mein code:
Code: 
body
{
  position:absolute;
  background:url(home.JPG);
  left:0px;
  top:0px;
 
  background-size:100% 100%;
  background-repeat:no-repeat;
  animation:dia;
  animation-duration:20s;
  animation-delay:5s;
  animation-interation-count:infinite;
  -webkit-animation:dia;
  -webkit-animation-duration:35s;
  -webkit-animation-delay:10s;
  -webkit-animation-iteration-count: infinite; 
}
   
@keyframes dia
{
  0%    {position:absolute; background:url(home.JPG); background-size:100% 100%; background-repeat:no-repeat;}
  25%  {position:absolute; background:url(home2.JPG); background-size:100% 100%; background-repeat:no-repeat;}
  50%  {position:absolute; background:url(home3.JPG); background-size:100% 100%; background-repeat:no-repeat;}
  75%  {position:absolute; background:url(home4.JPG); background-size:100% 100%; background-repeat:no-repeat;}
  100%  {position:absolute; background:url(home.JPG); background-size:100% 100%; background-repeat:no-repeat;}
}
   
@-webkit-keyframes dia
{
  0%    {position:absolute; background:url(home.JPG); background-size:100% 100%; background-repeat:no-repeat;}
  14%  {position:absolute; background:url(home2.JPG); background-size:100% 100%; background-repeat:no-repeat;}
  28%  {position:absolute; background:url(home3.JPG); background-size:100% 100%; background-repeat:no-repeat;}
  42%  {position:absolute; background:url(home4.JPG); background-size:100% 100%; background-repeat:no-repeat;}
  56%  {position:absolute; background:url(home5.JPG); background-size:100% 100%; background-repeat:no-repeat;}
  70%  {position:absolute; background:url(home6.JPG); background-size:100% 100%; background-repeat:no-repeat;}
  84%  {position:absolute; background:url(home7.JPG); background-size:100% 100%; background-repeat:no-repeat;}
  98%  {position:absolute; background:url(home.JPG); background-size:100% 100%; background-repeat:no-repeat;}
}

einfach mal die website in chrome öffnen, hier sihts so au wies soll, und dann in firefox, internet exploerer und opera

wer ne lösung hätte oder einen lösungsansatz bitte melden

Lunge
 
Außer Chrome sollte auch Firefox diese Angaben unterstützen. Andere Browser, selbst der IE10 offenbarm können das noch nicht oder nur teilweise. Schau dich mal nach "css animation support" um - da gibt es entsprechende Listen.
 
danke für die antworten

habe gelesen das opera 12 und internet explorer, firefox das unterstüzen sollen
hab mir in der libary von microsoft shcon beispiele angeschaut
 
lungentorpedo schrieb:
da ändert sich in firefox ie opera rein garnichts
Zum Vergrößern anklicken....

1. Hatte ich dich bereits auf einen Syntax Error hingewiesen.
2. Funktionieren CSS3 Animations natürlich auch in FF und Opera. Bei älteren Versionen notfalls vendor prefix voranstellen. Im IE sollte es ab Version 10 laufen.
3. Löst man Probleme durch Simplifizierung. Erstelle eine weitere HTML-Datei mit einer einfacheren Animation und überprüfe das in den gängigen Browsern.
4. Bringe deine Bilder mittels Photoshop oder Gimp auf vernünftige Dimensionen. 2 MB pro Bild sind eine Zumutung für mobile Devices mit Volumen Flatrates.
5. entferne position: absolute, top und left vom Body. Das hat da nichts zu suchen.
6. werden vollflächige background-images per background-size: cover oder contain positioniert.
7. Ist es unnötig, redundante CSS-Eigenschaften in die keyframes zu schreiben.

Zum Rest des Quellcodes sage ich jetzt mal nichts ...
 
Erstens mal ich habe noch nichts hochgeladen, hatte ich vergessen, ich teste immer erstmal zuhause im localen netz.
Zweiten wenn Bilder gut aussehen sollen sind die nun mal größer.
punkt 5. danke habe das geändert
ich habe das mit dem vendor prefix längst getestet ändert aber nichts.
Den Syntax Error habe ich natürlich gefunden

danke für deine unterstützung
 
Zuletzt bearbeitet:
50% der User gehen heutzutage bereits mit mobilen Geräten ins Netz. Die Datentarife für Smartphones und Tablets beinhalten meist nur wenige hundert MB bis 1 GB monatliches Volumen. Eine Webseite, die 8-10 MB Download lediglich für eine Slideshow verschwendet, ist ein Killer. Mal ganz abgesehen von den Performance-Problemen.

Wenn deine Seite sich nicht in der U-Bahn auf einem Androiden und iPhone vernünftig empfangen und anzeigen lässt, brauchst du über Browseroptimierung für IE & Co. gar nicht mehr nachzudenken.
 
Schon jemand eine Lösung für eine background diashow im body mit css ???? (für firefox)
Hab schon viel getestet mit Farben geht das auch aber wenn ich bilder nehme passiert nichts.
Laut firefox und wc3 soll der das aber unterstützen

Code: 
 #test
  {
  -moz-animation-name:dia;
  -moz-animation-duration:35s;
  -moz-animation-direction:normal;
  -moz-animation-delay:5s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-play-state:running;
  width:200px;
  height:200px;
background-image:url(home.jpg);
  background-size:cover;
  }
 
  @-moz-keyframes dia
  {
  0%  {background-image:url(home2.jpg);background-size:cover;}
  20% {background-image:url(home3.jpg);background-size:cover;}
  }
 
Das hilft mir gar nicht weiter.
Ich weiß das Firefox animation unterstützt.
nur eben meines wissens nicht mit grafiken.
wenn jemand doch einen weg hat wäre das echt hilfreich.

Wenn ich in meinem code den befehl "background-image:url();" durch "background-color: ...;
ersetzte findet ja eine animation stadt.


Gruß

Lunge
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben