Question

I have an array of background images that I would like to cycle through as a simple fade effect. This is easily done with the image html tag but i need them to be background images set as a style. The background images are dynamically pulled through using a cms.

Here is the link so you can see what I’m dealing with on the homepage (the current image is just a background image set in css n the page-top div):

link

Answer 1

This effect can be easily achieved by Cycle jquery plugin:

an example:

HTML:

<div class="pics"> 
    <img src="images/image1.jpg" width="normal height" height="normal height" /> 
    <img src="images/image2.jpg" width="normal height" height="normal height" /> 
    <img src="images/image3.jpg" width="normal height" height="normal height" /> 
</div>

JS:

$(".pics").cycle({
   ,options,
});

you should set your pics div width and height the same as the width and height of the page and with hidden overflow to prevent image being overflown.

here is a sample:http://bazar-restaurant.somee.com