How to make a transition between images using background-image COVER?

Question

I want to make a transition from background images on my site. I used JQuery for it.

However, the images have to be with the COVER effect. But I can not do that.

I used this example for make the image cover: How to make a background cover a separate div?

After, I insert the Jquery to make a transition, but I can't make all images are to cover effect.

How to make this?

    var id = 0;
    var imgs = new Array();
    imgs[0] = "http://www.imagenstop.blog.br/wp-content/gallery/imagens-de-fundo/Imagem-de-Plano-de-Fundo.jpg";
    imgs[1] = "http://wallpaper.ultradownloads.com.br/56263_Papel-de-Parede-Fundo-de-Mosaico-Azul_1920x1200.jpg";
    imgs[2] = "http://www.wallpapersxl.com/wallpapers/2560x1600/fundo-de-tela-azul/450289/fundo-de-tela-azul-neon-papel-parede-450289.jpg";

     //ADD IMAGES
    function troca() {
      if (id < imgs.length - 1) {
        id++;
      } else {
        id = 0;
      }
      $(".conteudo").fadeOut(250);
      setTimeout("$('.conteudo').html('<img src="\" + imgs[id] + "\" width=\"50%\" height=\"100%\" class=\"bg\"/>');$('.conteudo').fadeIn(500);", 250);
    }
    var segundos = 3;
    setInterval("troca();", segundos * 2000);

.conteudo {
  width: 100%;
  height: 100%;
  background: url('http://www.imagenstop.blog.br/wp-content/gallery/imagens-de-fundo/Imagem-de-Plano-de-Fundo.jpg') no-repeat;
}
img.bg {
  background-image: url('http://www.imagenstop.blog.br/wp-content/gallery/imagens-de-fundo/Imagem-de-Plano-de-Fundo.jpg');
  */ background-size: cover;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 90%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="visible-sm visible-md visible-lg conteudo" style="width:100%; height:100%;"></div>

Answer 1

By default, <img> tags are opaque. You cannot see the background-image of an <img> tag unless the img is transparent, but even so, it is very uncommon.

The common practice is to set a background-image property on a block or inline-block element, usually holding the normal page content, content that will be rendered above the background image.

Here is an attempt to streamline your script, assuming this is the desired outcome:

Note: you can add as many images to the imgs array.

var
  the_target = '.conteudo',
  imgs = [
    "http://www.imagenstop.blog.br/wp-content/gallery/imagens-de-fundo/Imagem-de-Plano-de-Fundo.jpg",
    "http://www.pageresource.com/wallpapers/wallpaper/vintage-blue-rishi-agarwal_2141757.jpg",
    "http://www.wallpapersxl.com/wallpapers/2560x1600/fundo-de-tela-azul/450289/fundo-de-tela-azul-neon-papel-parede-450289.jpg"
  ],
  addBackground = function(i) {
    if (i == imgs.length) i = 0;
    var bgImage = $(the_target + ' .bgImage');
    bgImage.eq(0).fadeOut('slow', function() {
      $(this).remove();
    });
    $(the_target).append($('<div />').css({
      'background-image': 'url("' + imgs[i] + '")'
    }).addClass('bgImage'));
    setTimeout(function() {
      addBackground(i + 1);
    }, 2000);
  };

addBackground(0);

body {
  margin: 0;
}
.conteudo {
  background-color: rgba(0, 0, 0, .35);
  color: white;
  padding: 3px 20px;
  position: relative;
  width: 90%;
  margin: 0 auto;
  box-sizing: border-box;
}
.conteudo>.bgImage {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  z-index: -1;
  top: 0;
  left: 0;
}
.conteudo>.bgImage:last-child {
  z-index: -2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="conteudo">
  <p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal
    blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.</p>
  <p>These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain
    circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted.</p>
  <p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal
    blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.</p>
  <p>These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain
    circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted.</p>
</div>

Answer 2

You shouldn't be placing background images on actual image elements. I'm having a hard time picturing what this is supposed to look like, but I think changing image element to a div would be a good start.

$('.conteudo').html('<img src=\""+imgs[id]+"\" width=\"50%\" height=\"100%\" class=\"bg\"/>');
$('.conteudo').fadeIn(500);",250);

to something like

$('.conteudo').html('<div style=\"background-image:' + imgs[id] + ';\" width=\"50%\" height=\"100%\" class=\"bg\"></div>');
$('.conteudo').fadeIn(500);",250);