3 replies [Last post]
kittypolo
kittypolo's picture
Offline
newbie
Last seen: 5 years 7 weeks ago
Timezone: GMT-5
Joined: 2015-08-29
Posts: 2
Points: 3

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 1068x378. The issue with the default replacement code generated by the website http://www.giftofspeed.com 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

kittypolo
kittypolo's picture
Offline
newbie
Last seen: 5 years 7 weeks ago
Timezone: GMT-5
Joined: 2015-08-29
Posts: 2
Points: 3

Well; just replace

Well; just replace background-repeat: no-repeat; with background-repeat: repeat-x; resolve the problem.
Thank you

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 22 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Glad we could help

Big smile Tongue

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

VeeraM
VeeraM's picture
Offline
Enthusiast
bangalore
Last seen: 5 years 2 days ago
bangalore
Timezone: GMT+5.5
Joined: 2014-09-22
Posts: 59
Points: 59

background repeat

Hi the background image or color repeat in this method to background-repeat:repeat-x(or)y,follow this code image or bgcolor are repeated in this your site.