Animated or Static Background Images

I followed David Anderson's video step by step to apply an animated gif file (colorwave.gif).  I used Sublime Text to code (David used DW).  I did it a few times but failed to get the animated background to appear.

There are the steps I took:

  1. Created a .story file
  2. Published it
  3. Stored the colorwave.gif file in the Published folder
  4. Opened Sublime Text to add <body background="colorwave.gif"> above the line  </head>
  5. Saved it.
  6. Copied the files in the Published folder to google drive as usual to view the published file - also tried to drag the zipped file to Tempshare

Did I miss a step somewhere?  David?  Tracy?



30 Replies
Daniela Slater

LOL!   Ok, but what could I have done different.  I can keep trying.  Thanks Michael.  So helpful, as usual!

So you are saying that it should work as published using Google Drive or Tempshare?  Let me see if I can take a snapshot of the coding in Sublime Text and I will post here?  or attach.

Michael Hinze

Here is your file published to my server and with the body style change to not tile the background image. To not stile, you need to add this body style and not use the original line:

body { background: url('colorwave2.gif') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;


Michael Hinze
Daniela Slater

Boy this is really frustrating.  I also tried with and without < > around the new coding you gave me to prevent tiling.  It isn't working again.  I will have to look at it again later.  I'm done with this for now and it's dinner time.  Family waiting.

See attached my published and zipped test file.