Animated or Static Background Images

Mar 04, 2016

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

This discussion is closed. You can start a new discussion or contact Articulate Support.