fade in and out a BG image
- Started
- Last post
- 10 Responses
- Dancer
I built a site ages ago for a construction company and now the client wants his project images to fade from one to the next contiuously without clicking.
Problem is that the images are set as a Background image of a div. Is there a quick way of doing this without rebuilding the site?
- BattleAxe0
an option http://buildinternet.com/2009/02…
- acescence0
you can just fade out the div, switch the bg image and then fade it back in without having to change any of the markup
- acescence0
here's a quick little background image thing i made with jquery. fades a div out, changes bg image, fades it back in, and just keeps looping thru an array of bg images...
- Dancer0
Hey thanks...
One major thing though.
I have no experience with JS....Acescence Do I have to include JQuery 1.3 with that as well?
- freitag0
if that div is a container for the rest of that content it is also possible with jquery to add an extra bg element with a lower z-index and have your background become transparent and with a higher z-index.. the lower one can fade in and out freely without harming your content.
- provided the page as a whole doesn't reload on every occasion..freitag
- Dancer0
acescence, can I email you my bodged attempt?
- Dancer0
I got it working thanks acescence, Unfortunately It fades out the whole content not just the BG image
- Dancer0
IS there anyway to target just the background-image and not the entire div?
- acescence0
there isn't unfortunately, but you can make that div position: relative, and then add a div inside position: absolute and a z-index of -1. that should put it behind the container div, then give that div the bg image.