Can I animate a background wallpaper, slow left.. then right

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4434
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Can I animate a background wallpaper, slow left.. then right

Post by simonmlewis »

I have a DIV with a large background image, set to be 100% width, so it's stretched to fit. It's clouds.

I'd like the image to slowly go across the DIV.. and when it reaches the end, it goes back the other way. so it's like clouds moving at the top of the web site.

I've seen a few animations in CSS, but they seem to just slide the whole image left to right. I need the image to be like perhaps 120% of the DIV, so when it moves left to right, there are no "gaps" left or right. So it looks like you are looking outside.

Is this poss?
Attached is the image I am using.
Attachments
Cloud background
Cloud background
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6425
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Can I animate a background wallpaper, slow left.. then r

Post by Celauran »

Front end is definitely not my strong suit, but what if you used an image that was wider than the div you're trying to fill and give it negative positioning so its edge is 'off canvas'. As you slide it, you're just pulling more image in and pushing the other side off canvas.
simonmlewis
DevNet Master
Posts: 4434
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Can I animate a background wallpaper, slow left.. then r

Post by simonmlewis »

How would you tell it to fill the DIV, and be a background image, and positioned "off" the page to the left?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply