<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Multiple Backgrounds (hover effect)</h2>
<div class="space"></div>
</div>
</div>
.space{
/* Pass a comma separated list of backgrounds: */
background:url('http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/rocket_big.png') no-repeat center 70px, url('http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/space.jpg') no-repeat bottom center;
width:200px;
height:200px;
margin: 0 auto;
border-radius:3px;
/* Animate the positions of both of the backgrounds */
transition:background-position 1s;
}
.space:hover{
/* The same goes for properties like background-position and repeat */
background-position:35% 20px, top right;
}
