Objectivs and outcomes

In this tutorial we are going to learn how to set multiple background images in HTML/CSS3 and add effects to these backgrounds on a certain action using CSS3.




The image shown above consist of two images. First images is of rocket and the other image is of space and they are both used as a background images. We have also added a hover effect to the image, as we hover on the we will notice a slight movement in the image which is done by using CSS3 transition. The HTML/CSS code for the above example is shown below:


CSS stylesheet:

<style>
.galaxy
{
background:url('img/rocket_big.jpg') no-repeat center 70px, url('img/space.jpg') no-repeat bottom center;
width:200px;
height:200px;
margin: 0 auto;
border-radius:3px;
transition:background-position 1s;
}
	 
.galaxy:hover
{
background-position:35% 20px, top right;
}
</style>


HTML code:

<html>
	<body>
	<div class="galaxy">
	</div>
	</body>
	</html>


Now in CSS we use background:url() function to place a background image so to use multiple images we seperate the url of all images with commas while the rest of attribute syntax remains same. Also we have used CSS transition to show the movement of images. We have set the transition property on background position attribute to take effect in 1second. And on hovering the background move the image to the top right position.