css transition background change not fading in smoothly

Question

I am trying to fade in a new background of a header when the user scrolls down. I would like it to fade in smoothly on top of the original background.

Instead what is happening, is that it is removing the original background and then fading in the new one. This makes the transition look ugly when the user scrolls down...

HTML

<div id="navbar" class="navbar">
</div>

CSS

#navbar {
  transition:  background 0.5s ease-in 0s;
}

.navbar {
  background: url("images/nav-bg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
  height: 75px;
  margin: 0 auto;
  max-width: 1600px;
  width: 100%;
  position: relative;
  z-index: 1;

}
.navbar.fade-blue {

    background:#566c75;

}

JS

jQuery(document).ready( function() {

jQuery(window).scroll(function() {

    if ( jQuery(window).scrollTop() > 20) {
        jQuery(".navbar").addClass("fade-blue");
    } 

    else {
        jQuery(".navbar").removeClass("fade-blue");
    } 
});
});

EDIT: I changed the .fade-blue class as I had two background rules there, I am attempting to fade a background image into a colour.

Answer 1

If you want to fadeIn/fadeOut your background imgae (A) with another one (B), you need to put both in a separate div, and apply to those the opacity transition.

If you need only to fadeOut your backgorund image, you can only put it on separate element inside parent container, and apply to that the opacity transition.

Here an example How to fade in background image by CSS3 Animation