Question

here is the sample: http://jsfiddle.net/Zg55k/

How can I change css background image and color smoothly with fade effect. When press background-image should fadeOut and background-color fadeIn in same time.

Answer 1

You should make 2 layers. The layer that you want to fade in must have a higher z-index (or places below the other layer in the code) and have opacity: 0;
Then gradually change the opacity to 1, for exmaple with jQuery animate.

HTML:

<div class="box1">
    <div class="box2">
    </div>
</div>

CSS:

.box1 {
    background-image: url(http://www.webdesign.org/img_articles/14881/site-background-pattern-07.jpg);
    width: 100px;
    height: 100px;
}

.box2 {
    height: 100px;
    width: 100px;
    background: #000000;
    opacity: 0;
}

JS:

$('.box1').click(function(){
    $('.box2').animate({
        opacity: 1
    });
});

See jsFiddle:
http://jsfiddle.net/Mikey/9D32K/

You also may do

<div class="box1"></div>
<div class="box2"></div>

But then you should position the boxes absolute.