Can I fade in a background image (CSS: background-image) with jQuery?

Question

I have a div element with text in it and a background image, which is set via the CSS property background-image. Is it possible to fade in the background image via jQuery?

div {    background-repeat: no-repeat;    background-position: center;    background-size: contain;    background-image: url(http://upload.wikimedia.org/wikipedia/commons/8/84/Konqi_svg.svg);    border: 1px solid #666;    height: 10em;  }

<div>Text</div>

EDIT

I've made a fiddle exemplifying my scenario. Basically, this configures an initial background-image and a transition, and changes the background-image with jQuery. In my testing there is no animated transition between the two images.

EDIT2

My revised fiddle works!

Answer 1

i have been searching for ages and finally i put everything together to find my solution. Folks say, you cannot fade-in/-out the background-image- id of the html-background. Thats definitely wrong as you can figure out by implementing the below mentioned demo

CSS:

html, body  height: 100%;   /* ges Hoehe der Seite -> weitere Hoehenangaben werden relativ hierzu ausgewertet */ overflow: hidden;   /*  hide scrollbars */ opacity: 1.0; -webkit-transition: background 1.5s linear; -moz-transition: background 1.5s linear; -o-transition: background 1.5s linear; -ms-transition: background 1.5s linear; transition: background 1.5s linear; 

Changing body's background-image can now easily be done using JavaScript:

switch (dummy)  case 1:  $(document.body).css({"background-image": "url("+URL_of_pic_One+")"}); waitAWhile();  case 2: $(document.body).css({"background-image": "url("+URL_of_pic_Two+")"}); waitAWhile();