Winner Winner, Chicken Dinner

That Sounds Dumb

No, you're dumb. I mean, it makes sense if you're looking to present visitors with a unique experience each time they hit you up. Think banners and heroes. Basically, I wanted to do this on a recent project TheMaisonMix.com, and figured someone somewhere might like to do something similar, so here we are.

How's It Work Then?

Easy peasy. You can either apply it directly to a img tag, or as a css background-image. And don't forget to include Jquery champ.

On an img tag

First, add your image tag with a unique class. Preferably, leave the src blank (href="#"), or add a fallback for the no js, "but that wont validate" punks - a sexy ass fadeIn animation prevents the image from popping through before the script fires (usually). Either way, to maintain the parent div's height, might wanna rock an intrinsic ratio move.

Initialize it, but this time add the option cssBG with the value of 'True'. ChickenDinner will then inject the background-image attribute via an inline style, so make sure to style up your div as you normally would for background images.