Bewegtes Hintergrundbild

[FizzeBu]

Hoi,
ich will ein Design erstellen mit einem bewegten Hintergrundbild, und auf der Suche nach etwas passendem bin ich über diese Seite: gestolpert.
Das ist genau was ich will, aber ich verstehe nicht was was ist. Ich kann den Code der für den Hintergrund verwendet wird nicht finden, kann mir jemand die Stelle zeigen oder die Funktion die ich dafür brauche? Wäre echt super. Ich habe auch keine Dokumentation gefunden, wenn jemand einen Link hätte wäre ich sehr demjenigen sehr verbunden.
Hoffe jemand weiß Bescheid.

[sava]

Hintergrund Bild animiert? Ansich nicht!

Das einzige was vorstellbar ist, dass du ein img tag machst und das in den Hintergrund legst mit z-index, das Bild kannste dann ja auch einfacher animieren.

[FizzeBu]

Guck dir mal die Seite an, dann verstehst du was ich meine, da ist der Hintergrund animiert.

[sava]

Das einzige Hintergrundbild was dort "animiert" ist, ist nur "animiert" weil die Rakete nach aussen fliegt und sich der Hintergrund von alleine mit verschiebt (wiederholt)...

[Heberg]

Ganz einfach !

Wenn du in "Div" schreibst, gibst du dem div, der dein Hintergrund ist, eine ID.
Diese wirst du denn im CSS ein Animiertes Hintergrund Bild zuweisen.

Das, was im HTML steht :
<div id="container"></div>

Das, was im CSS steht :

#container {
width: 1250px;
height: 1000px;
[COLOR="Red"]background-image: url(Bilder/Animation.gif);[/COLOR]
}

MfG
Heberg

[NotEnoughForYou]

Originally Posted by Heberg

Ganz einfach !

Wenn du in "Div" schreibst, gibst du dem div, der dein Hintergrund ist, eine ID.
Diese wirst du denn im CSS ein Animiertes Hintergrund Bild zuweisen.

Das, was im HTML steht :
<div id="container"></div>

Das, was im CSS steht :

.container {
width: 1250px;
height: 1000px;
[COLOR="Red"]background-image: url(Bilder/Animation.gif);[/COLOR]
}

MfG
Heberg

du hast allerdings ne Klasse in deiner CSS stehen ...

[Heberg]

Originally Posted by NotEnoughForYou

du hast allerdings ne Klasse in deiner CSS stehen ...

Fail, danke, habs korriegiert

[FizzeBu]

Ich weiß schon wie man einen BG zuweist, ich benutze kein .gif, ich will doch einfach nur wissen wie dieses webkit Teil funktioniert.

[sava]

Also wenn du wissen willst was webkit ist: kurform: ist ne Browser Engine und spezielle webkit befehle im CSS werden auch nur in Browsern mit webkit angezeigt.

[FizzeBu]

Ja, das weiß ich auch. ;o
Wie ich in meinem ersten Post auch gesagt habe will ich wissen was in diesem Code:

<style type="text/css">

  #outerspace {
    position: relative;
    height: 400px;
    background: #0c0440 url(/images/outerspace.jpg);
  }
  div.rocket {
    position: absolute;
    bottom: 10px;
    left: 20px;
    -webkit-transition: all 3s ease-in;
    -moz-transition: all 3s ease-in;
    -o-transition: all 3s ease-in;
    -ms-transition: all 3s ease-in;
  }
  div.rocket img {
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    -ms-transition: all 2s ease-in-out;
  }
  #outerspace:hover div.rocket {
    -webkit-transform: translate(540px,-200px);
    -moz-transform: translate(540px,-200px);
    -o-transform: translate(540px,-200px);
    -ms-transform: translate(540px,-200px);
  }
  #outerspace:hover div.rocket img {
    -webkit-transform: rotate(70deg);
    -moz-transform: rotate(70deg);
    -o-transform: rotate(70deg);
    -ms-transform: rotate(70deg);
  }

</style>

dafür sorgt dass sich der Hintergrund bewegt. Ich kenn mich mit Webdesign eigentlich ein bisschen aus, aber für diesen Code reichts halt nicht, darum erbitte ich Hilfe.

[sava]

Schau dir "#outerspace" mal mim Firebug oder so an, da steht mehr drin als im Code beschrieben wird.

-webkit-transition:all 3s ease-in;
-moz-transition:all 3s ease-in;
-o-transition:all 3s ease-in;
-ms-transition:all 3s ease-in;

Das ist der Code den du benötigst