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

Home Forums CSS Please help sprite background repeat

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #207350


    I have the following code that work well:

    #clouds { background: transparent url("clouds.png") repeat-x scroll 305px 20px; height: 301px; margin: 0 auto; text-align: center; border: 0; }

    Now, i would like to replace it with a sprite, I use an online generator that provide me the following new code to replace the current :

    .sprite {display: inline-block; vertical-align: middle;}
    .sprite {background-image: url("sprite.png"); background-position: left center; background-repeat: no-repeat;}
    .sprite.clouds_png {background-position: 0 0; width: 1068px; height: 378px;}

    For information the image clouds.png has a physical dimensions of 1068×378. The issue with the default replacement code generated by the website Test & Optimize Website Speed – GiftOfSpeed is that the image does not repeat itself and it didn’t take all the width of the window like the original code do.

    So is their an alternative to adapt the generated code in such a way to achieve exactly the same behavior of the first code ?

    Thank you


    Sure, what about:

    .sprite.clouds_png {
      /* stuff */
      background-repeat: repeat-x;
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.