Question

I have a website im working on and right now it has a gradient bg with ccs code and have a cloud image on top with transparent background. I’m trying to make the clouds scroll left infinatly to make it stand out a bit more. Is there any way to do that with just adding in some CSS codes? heres my code

#body { background: #9bd5eb;
background-image: url(../images/bloobg.png); /* fallback */
background-image:url(../images/bloobg.png), -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
background-image: url(../images/bloobg.png), -webkit-linear-gradient(bottom, #9bd5eb, #01aef0); /* Chrome 10+, Saf5.1+ */
background-image:    url(../images/bloobg.png), -moz-linear-gradient(bottom, #9bd5eb, #01aef0); /* FF3.6+ */
background-image:     url(../images/bloobg.png), -ms-linear-gradient(bottom, #9bd5eb, #01aef0); /* IE10 */
background-image:      url(../images/bloobg.png), -o-linear-gradient(bottom, #9bd5eb, #01aef0); /* Opera 11.10+ */
background-image:         url(../images/bloobg.png), linear-gradient(bottom, #9bd5eb, #01aef0); /* W3C */
background-attachment:fixed;
}

`

link to the website is http://www.bloomooyogurt.com Thanks!

Answer 1

No, you need to use JavaScript. There comes a point in “infinite scroll” animation where you need to detect and reset the positions of the elements. CSS cannot do that.