Grow your CSS skills. Land your dream job.

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: http://css-tricks.com/forums/discussion/20733/input-requested-with-my-first-site#Item_24

    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.

    http://codepen.io/joe/pen/CInBJ

    Thank you!

    # December 7, 2012 at 6:43 pm

    @mr_z :
    This should solve your problem of looping through images.
    Image looping : http://trendmedia.com/news/infinite-rotating-images-using-jquery-javascript/

    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.

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