Swiffy animation as responsive background

HTML & CSS
1

I am trying to set up this swiffy script as a responsive background but the height does not get adapted to the screen, as when we do it with the “cover” property in a regular image background, I always see a letterbox effect, I did try already setting up the container with width and height in 100%, as well in auto, no margin, etc, but nothing happens.
This is the site:
http://gloriajesus.com/
Thanks in advance

2

Hi,

You are using the 16:9 ratio trick which mens the image will only cover the element on which you place it while still maintaining the 16: 9 ratio.


.homeContent {
    float: left;
    height: 0;
   [B] padding-bottom: 57%;[/B]
    position: relative;
    width: 100%;

The percentage padding-bottom ensures that the height is always related to the width (the 16:9 ratio) and is mainly used for videos to control the correct aspect ratio.

I’m not sure what effect you were going for but if you want full-screen background images then something like backstretch should do the job.

3

But when I dont put this it does not take it from the top, it is even worst, I will look how to do it with this plugin, thank you!

4

There is another thing that I didnt say maybe, that is not an image, its an script that swiffy creates, I dont know how to insert it with the plugin now :confused:

5

Hi,

Yes that may be a bit awkward as I assumed you were just adding a slideshow effect with static images but I ‘believe’ swiffy converts flash files into html5 svg animations. I didn’t see any animation when I looked at your site so I just assumed you had static images.

You can still probably force the issue but it will result in the image/animation being distorted. Is there a reason you can’t use simple background images or are you indeed running animations in the background?

6

Its not static, theres a very weak and little animation in the light that comes from the hat, we want to do a more dramatic one but this is for testing, with a jpg or png would be waaay easier I know, we use to do it with backgorung:cover, but we cant with this animations inside the script.