Grow your CSS skills. Land your dream job.

CSS Animation (background-image position) – but Responsive?

  • # April 16, 2013 at 7:18 am

    Is this possible?

    I’ve made a small CSS animation by shifting the background position (on :hover for now but that’s neither here nor there…I will put in a link to trigger the hover state on a touch device later on)

    The question is – I have shifted my background position in percentages, as you can see I’ve manually scaled the banner and it works…however I need to make 100% width so this will work fluidly. Therefore I need to maintain the ratio of the height…which I’ve work out at 24.68%.

    I’ve tried setting the width to 100% and the height to 24.68% and it just doesn’t display anything.

    Any ideas?

    .ani {
    margin: 0 auto;
    max-width: 940px;
    height: 232px;
    background-image: url(StudioAnimation-Sprite.jpg);
    background-size: cover;
    background-position: 0px 16.7%;
    }

    .ani600 {
    margin: 0 auto;
    max-width: 600px;
    height: 148px;
    background-image: url(StudioAnimation-Sprite.jpg);
    background-size: cover;
    background-position: 0px 16.7%;
    }

    .ani:hover, .ani:focus, .ani600:hover, .ani600:focus {

    -webkit-animation: play 1.3s steps(5) 1;
    }

    @-webkit-keyframes play {
    0% { background-position: 0px 16.7%; }
    100% { background-position: 0px 100%; }
    }

    Thanks

    # April 16, 2013 at 7:46 am

    Could you make a Codepen…with working images?

    # April 16, 2013 at 7:49 am

    You could try `background-size: auto 100%;`

    # April 16, 2013 at 8:53 am

    Thanks, but because I’m animating a sprite this actually re-sizes the whole image so you can see the other frames once it gets re-sized.

    I need to set the .ani div to width 100% and height 24.68% (so it maintains that ratio) and the background image to 100% with a size of cover.

    However if I give the div any height other than a fixed value it just disappears.

    I will set up a copepen account shortly! Thanks

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".