title: Background image transition using jQuery
body: <p>I made a little jQuery code that changes the background image in the box.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="content-wrapper" id="box"&gt;
      &lt;div class="content"&gt;
          CONTENT
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQUERY</strong></p>
  
  <pre><code>     slide=Math.floor((Math.random() * 6) + 1); slide=(slide==0?1:slide);
          $("#box").attr("style", "background-image:url(images/slider/"+(slide)+".jpg);");
          setInterval(function() {
              $("#box").attr("style", "background-image:url(images/slider/"+(slide)+".jpg);");
              slide++; if(slide&gt;6) slide=1;
          }, 6000
  );
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.content-wrapper{
      display:table;
      width:100%;
      color:black;
      text-align:center;
      margin:0 0 0 0 !important;
      padding:0px !important;
      height:600px;
  }
  .content-wrapper &gt; .content{
      width:100%;
      display: table-cell;
      vertical-align:middle;
      text-align:center;
      font-size:36px;
      font-weight:bold;
  }
  #box {
      background-repeat: no-repeat;
      background-position:center top;
      background-attachment:fixed;
      background-size:cover;
  }
  #box &gt; .content{
      background:rgba(0,0,0,0.5);
      color:#FFF;
  }
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/CreativForm/yjq6opLv/" rel="nofollow">DEMO</a></strong></p>
  
  <p>My idea is when page is loaded each time show random pictures and start slide that changes image every 6 seconds. All this works nicely, but I do not know how to make a nice transition. fadeIn() or fadeOut() is out of the question because over the images I have fixed text content. I do not want to use too large libraries for background slider, so I'm interested in the simplest solution. Thank you very much.</p>