Constrained Animated Gif

This is animated part 2. This one is a large image—1,200px wide x 682px high. That's too big for the normal post column, but I will demonstrate some things about usage. The important thing is that the animated .gif is uploaded to Blogger.

There are two images here, the terrain is a .jpg and the flying plane is an animated-transparent .gif. Both images are uploaded to Blogger using the normal upload technique. The terrain has a 1px yellow border, and the plane a 1px teal, which I left in place only to show the position.

The version above works because stretch template gives enough room and I changed the addresses for both the background and the animated foregroumd to the s1600 folder, which is full-size. How is it coded?

Here's the images code, bottom followed by top, with the style= and id= omitted: <img src="http://1.bp.blogspot.com /_TUd2gQn_l3o /SHQuvL7uL4I /AAAAAAAAAho /YY5G9OuNtsE /s1600/img_0976csw1200a.jpg" alt="Terrain" /> <img src="http://2.bp.blogspot.com /_TUd2gQn_l3o /SHQuvXiKBZI /AAAAAAAAAhw /9kXvkVkHGao /s1600/flier-b1.gif" alt="Flying" />

For both images the s1600 in red was s400 in the Blogger code and was changed to get the full size image.

The versions below are as-uploaded, with "large" size selected. The images are scaled by Blogger, to 400px wide, and the resized image will not animate.

The code: <img src="http://1.bp.blogspot.com /_TUd2gQn_l3o /SHQuvL7uL4I /AAAAAAAAAho /YY5G9OuNtsE /s400/img_0976csw1200a.jpg" alt="Terrain" /> <img src="http://2.bp.blogspot.com /_TUd2gQn_l3o /SHQuvXiKBZI /AAAAAAAAAhw /9kXvkVkHGao /s400/flier-b1.gif" alt="Flying" />

Note the scaled image that Blogger delivers for the post is used here: the red s400 is the give-away. And I'll repeat that when the reduced size image is used, it will not animate.

The following uses a Blogger-scaled terrain shot and I use the full sized code plus a scaling size for the gif. That allows it to animate.

I'm showing the style in the gif because that's where I scaled the full-sized. Note that only the gif uses the full sized (s1600) image, sized in the style: the jpg works in the Blogger scaled format. The code:
<img src="http://1.bp.blogspot.com /_TUd2gQn_l3o /SHQuvL7uL4I /AAAAAAAAAho /YY5G9OuNtsE /s400/img_0976csw1200a.jpg" alt="Terrain" /> <img style="width: 400px;" src="http://2.bp.blogspot.com /_TUd2gQn_l3o /SHQuvXiKBZI /AAAAAAAAAhw /9kXvkVkHGao /s1600/flier-b1.gif" alt="Flying" />

To see how position: is used to do the overlay, go back to Animated Test.