JSFiddle - React, Tailwind, and code Playground

by Alin Guta

HTML

<div id="banner"><p>banner</p></div>

CSS

div#banner {
    width:100%;
    height:150px;
    margin:auto;
    background:url('http://i.imgur.com/fVuxwNZ.png') repeat 0 0;
}
 
div#banner p {    
    font: 15px Arial, Helvetica, sans-serif;
    color:white;
    position:relative;   
    left:20px;
    top:120px;
    width:305px;
    padding:20px;
    background:black;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:20px;
    zoom: 1;
    filter: alpha(opacity=50);
    opacity: 0.5;     
}

JavaScript

(function($) {

	        var x = 0;
	        var y = 0;
			//cache a reference to the banner
	        var banner = $("#banner");

			// set initial banner background position
	        banner.css('backgroundPosition', x + 'px' + ' ' + y + 'px');

	 		// scroll up background position every 90 milliseconds
	        window.setInterval(function() {
	        	banner.css("backgroundPosition", x + 'px' + ' ' + y + 'px');
	            y--;
	            //x--;

	            //if you need to scroll image horizontally -
	            // uncomment x and comment y

	        }, 30);

})(jQuery);