PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Thu Sep 24, 2020 4:04 pm

All times are UTC - 5 hours




Post new topic Reply to topic  [ 4 posts ] 
Author Message
PostPosted: Wed Jun 10, 2015 5:06 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
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:
File comment: Cloud background
bg_topcloud.jpg
bg_topcloud.jpg [ 105.52 KiB | Viewed 4697 times ]

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Top
 Profile  
 
PostPosted: Wed Jun 10, 2015 7:22 pm 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
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.

_________________


Top
 Profile  
 
PostPosted: Thu Jun 11, 2015 2:37 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4434
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Thu Jun 11, 2015 6:50 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6425
Location: Montreal, Canada
https://developer.mozilla.org/en-US/doc ... background

background-position

_________________


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 4 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 8 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
cron
Powered by phpBB® Forum Software © phpBB Group