How can I fade are background image in and out using Jquery in a parent div without having it affect the child div?

Question

1. I've got a parent div content-bg which contains the background image fading
2. I've got the child div content which contains the content
3. The problem is when the background-image fades in and out fn the content-bg, the items in the content div gets faded in and out to
4. Can someone please guide me through an adjustment I need to make or something?

HTML:

<div class = "content-bg" style = "height:auto;">
  <div class="container-fluid">
    <div class="row row-r">
      <div class="col-sm-5 col1"> <img src="pics/texts/wel.png" style = "width:80%;height:80%x;display: block;margin-left: auto;margin-right: auto; padding-bottom:10px; padding-top:30;" class="img-responsive"></img>
        <p >Hey everyone, thank you for taking the time to check out our website.This is the place you’ll find every piece of information you will need regarding our wedding celebration. </p>
        <p> We are so excited to be spending this special time with friends and family we hold so dear to our hearts.</p>
        <p>Gerrant and I can't wait for this wonderful day and we hope you will join us in each step we take as we come closer to our big day. </p>
        <h3>Let the celebration begin!</h3>
      </div>
      <div class="col-sm-7 col2" ><img src="pics/img1.png" alt="" style = "width:100%;height:100%x;"></div>
    </div>
    <!-- end row--> 
  </div>
  <!-- end container--> 
</div>
<!-- end of contentbg-->

CSS:

.col1{
   background-image: url("pics/behind.png");
   background-repeat: repeat;
   border-radius: 60px;
   border:5px dotted #e6ffff;
   text-align: center;
   font-family: "Goudy Old Style", Georgia, Serif;
   font-size: 18px;
   color: #FFFFF0;
   padding-left:30px;
   padding-right:30px;   
   height:auto;
   max-height:25%;
   }

.col2{
    background-color:transparent;
    height:auto;
    max-height:50%;
}

img {
    max-width: 100%;
    max-height: 100%;
}

.content-bg {
    overflow:hidden;
    position:relative;
    z-index:-1000;
    background: url(pics/bg.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
    background-size: cover;
    height:100%;
    width: 100%;
}

.content-bg .row-r{
    z-index:1000;
    position:absolute;
    margin-left: auto;
    padding-top:30px;
    width: 80%;
    right:10%;
}

JQuery:

var images = ['pic1.jpg', 'pic2.jpg',   'pic3.jpg', 'pic4.jpg','pic5.jpg', 'pic6.jpg'];
$(function () {
    var i = 0;
    $(".content-bg").css("background-image", "url(pics/bg/" + images[i] + ")");
    setInterval(function () {
        i++;
        if (i == images.length) {
            i = 0;
        }
        $(".content-bg").fadeOut("slow", function () {
            $(this).css("background-image", "url(pics/bg/" + images[i] + ")");
            $(this).fadeIn("slow");

        });
    }, 6000);
});

Answer 1

Instead of using the image as a background you could add a seperate div on the same level as the content and set an image there. Now if you align the content text on top of this img you can fadeIn and out this div containing the img without losing the content text.

You are now simply fading out the entire content-bg div which means it will also fade out the content within this div.