Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] CSS Sprite Animations on retina

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #145832
    ricnunes
    Participant

    Hi guys!

    I’m making this website, with a lot of sprites troughtout css animations, using sprite sheets. The problem is, I’m unable to make them work with a retina display :/

    Can you guys help me? You can see the website and the sprites at http://server3.ibt.pt/testesnet2/equipa_design/WS/advertisers.html

    #150455
    ricnunes
    Participant

    Same issue, new problem.

    How can I make a sprite work, with retina AND responsive? Haven’t seen anything online that can help me with this…

    Guys?

    #150462
    Paulie_D
    Member

    I’m not sure but my understanding is that sprites aren’t responsive by definition as they rely on defined pixel values to work.

    Then again: http://tobyj.net/responsive-sprites/

    #150469
    ricnunes
    Participant

    Thank you Paulie_D

    #150474
    ricnunes
    Participant

    Finally managed the Retina and responsive problem. Just have to create a horizontal or vertical sprite and, on the media query for retina screens, make this:

    For horizontal sprites with 6 images:

    background-size: 600% 100%;

    For vertical sprites with 4 images:

    background-size: 100% 400%;

    For the responsive part, just did what was on the link Paulie_D sent me.

    Animated sprites on retina and responsive websites: Check :)

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.