The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Simple Script Needed for Swapping Background Images

  • # December 7, 2012 at 12:55 pm

    Hi guys,

    I’m building my first site and am new to HTML and CSS. You can see my original thread here:

    As part of my design, I was hoping to have a series of hair model images sequentially displayed on the background of the homepage. I don’t need anything fancy, no user controls or navigation arrows or the like… Just the images being displayed on top of background color, on a loop.

    This has proven to be more difficult than I first imagined! Paulie_D was kind enough to point me to a site with some code snippets, but turned out to be a little too complex for me to make it work. I’ve searched this site and the Internet but was unable to find anything suitable for various reasons. I am planning on learning JavaScript in the near future, but I’m not there yet.

    I was wondering if anybody would know of a simple script that could achieve this effect. It would be greatly appreciated!

    Here’s my code so far. The logo is a generic image I found on the Internet with approximately the same dimensions as the one I made.

    Thank you!

    # December 7, 2012 at 6:43 pm

    @mr_z :
    This should solve your problem of looping through images.
    Image looping :

    I would have wrote something up for ya but this could easily be configurable and not re-inventing the wheel. You could do this with just css3 but jquery would work on all browser.

    # December 15, 2012 at 1:42 pm

    Hey John, just wanted to let you know, that script was exactly what I was looking for! Thanks a lot man! I copied the script and edited and positioned it using CSS. It worked perfectly for me. Take care

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed