Grow your CSS skills. Land your dream job.

How to change DIV background image every 5 seconds?

  • # November 5, 2012 at 1:26 pm

    Hey!

    First post, my apologies if something like this has been answered, or if it’s a stupid question. I have been searching and cannot find the ebst solution to this problem! (I am assuming this a a javascript fix? But I could be wrong)

    The idea is that there will be a background image of a `

    ` that changes every 5 seconds.

    Currently, I have an image of width: 1600px that changes every 5 seconds, however when the window is too small, it creates scrollbars as it is not truly a background. I want to have the image as a background, centered, so any excess on the right and left will be left offscreen with no scroll bars.

    Any ideas???

    # November 5, 2012 at 1:40 pm

    rather than a div containing an image how about setting the background with css then centring it with the position parameter’s with no set width your issue with scroll bars should disappear until it hits actual content.

    As for changing it every five seconds take a look at jquery setTimeout function

    # November 5, 2012 at 2:52 pm

    What about adding a min-width to that background, and use overflow:hidden?

    # November 5, 2012 at 4:03 pm

    Aha! Thanks to both of you! Got it!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".