Please help sprite background repeat

[kittypolo]

Hello;

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

[Atelierbram]

Sure, what about:

.sprite.clouds_png {
  /* stuff */
  background-repeat: repeat-x;
}

[Author]

Posts