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

It works when it's tiled but not untiled.  Is this correct with the < > start and end?

<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

It works when it's tiled but not untiled.  Is this correct with the < > start and end?

<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;
}>

Have a look at the published example I supplied and cut&paste the code snippet from there into your file.

Daniela Slater

I figured out what the problem was and it wasn't all my fault from the looks of it.  If you look at my screen shot of the coding, you will see the location of what I copy pasted from what you gave me is different than yours.  When I watched David's video, he instructed that the special coding be placed above </head> but in yours it is between object and </style>.  Yours also included { margin: 0; padding: 0; }, mine and David's didn't.  I'm sure there is a good reason for all this.  I will continue to work through my course to learn more and understand.

Anyway, it worked this time.  Thank you for all your help and patience Michael!!

https://googledrive.com/host/0B4cWLl4F_TnfRzMyNjZvd2NxelE