JSFiddle - React, Tailwind, and code Playground

by gtw7375

HTML

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<div class="block" class="background-image">     
    <div class="centered">
    
        <img src="http://www.vectortemplates.com/raster/batman/batman-logo-big.gif" class="img-responsive" id="img_logo">
        
            <a style="font-size:35px;"> xxxxxx</a> 
            <br><br>text text <br> address <br>  
            <br><br>text text <br> address <br> 
            <br><br>text text <br> address <br> 
            <br><br>text text <br> address <br> 



          

    </div>
</div>

CSS

html, body {
  width: 100%;
	height: 100%;
	padding:0;
	margin:0;

}



 p {
  font-family: 'Open Sans Condensed', san-serif;
  font-size: 14px;
  color: black;
  line-height: 14px;
  margin-top: 30px;
}

.block {  
  height: auto;
  min-height: 100%;
  width: 100%;
  text-align: center;
}


.background-image  {
  
  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;
}
/*.background-image:last-child {
  z-index: -2;
}*/




.centered {
  
  margin-top: 10%;
  display: inline-block;
  vertical-align: middle;
  max-width: 500px;   
  background: red;

}





.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
  width: auto;
}

JavaScript

var imgs = [
        "http://www.vectortemplates.com/raster/batman/batman-logo-big.gif",
        "http://www.download-free-wallpaper.com/img85/ubrhdvzcyetuouwxomid.png",
        "http://www.mycity-web.com/wp-content/uploads/2015/08/logos.jpg"
      ],
     addBackground = function(i) {
        if (i == imgs.length) i = 0;
        var bgImage = $('.background-image');
        bgImage.eq(0).fadeOut('slow', function() {
          $(this).remove();
        });
        $('.block').append($('<div />').css({
          'background-image': 'url("' + imgs[i] + '")',
          'background-repeat': 'no-repeat'
        }).addClass('background-image'));
        setTimeout(function() {
          addBackground(i + 1);
        }, 5000);
      };
    addBackground(0);