Using jQuery to fade background images

I know this questions has been asked many times before -- but I haven't been able to find an answer that will help me.

I'm hoping there is a solution for my specific issue. I'd like to be able to fade in and fade out a series of background images on a site I am working on right now. I don't think I can use conventional fader scripts because the images I am fading are wider than normal and I don't want horizontal scroll bars to appear. (1476x253)

I've set up a jsFiddle at http://jsfiddle.net/michaelharmon/szvMH/ if anyone wants to help me tackle this issue.

Here is a link to another sample image to use in the f开发者_高级运维ade testing:

http://209.142.68.153/images/cityscape-home.jpg

Thank you for any help you can offer.

---

I think you can use the jQuery Cycle Plugin, with the fade effect to accomplish what you need. The options reference page shows that you can set container height and width, as well as CSS parameters before and after the transition - that should be enough to accomplish what you need.

---

Try to use this jQuery plugin - http://srobbin.com/jquery-plugins/jquery-backstretch/

Its very simple to use:

<script type="text/javascript">
    $.backstretch("URL TO YOUR IMAGE", {speed: 800});
</script>