Multiple Backgrounds
Most of the people work on background css but some of them dont have idea about multiple backgrounds. By using multiple backgrounds, we can able to set two background images on the same area.
With the help of multiple backgrounds, designers can able to give very interesting effects. They can take different images as a backgrounds of the same element and work on it. So we can able to move and animate the images independently, like you can see in the demo code below (if you hovering over the image with your mouse). All background-releated CSS rules can now work on a comma-delimited list of properties for every background image:
We can also give the idea about background-position property that will help to move from one position to another.
Below is the example of multiple backgrounds.
Below is a html code that you can copy and paste within a <body></body> tag
HTML Content
Below is a css code that you can copy and paste in the header section of code that is between <head></head>
CSS Content
<style type="text/css">
.space{
/* Pass a comma separated list of backgrounds: */
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg6NOXh2-gHTXXWRZL4O8C2mDx7r1wyuXd4FRyVBvkPGp8i-6ofeUJ-YB0WBCltzgZSAgOTABBnTUuw-vb6Y_U_7z5pAz4OwrXYdY3V4gK8fh691yWBX1DqiThO7YASOeK-90fzTOsSXo/s1600/rocket_big.png") no-repeat center 70px, url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis1A2s5dlyNl8EvVpgaXY00hchhJ0Mxn_Jp9RInWMJZpUm6jJUWdR-sZpI-rLViVcqV_eQFPd1VPehHplMKXZ8-tmm9E6jn8WpxEEFH7VLxGM-NbWTMxPVDoC82LN9jbtCBxXPlxRe3O4/s1600/space.jpg") no-repeat bottom center;
width:250px;
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:50% 1px, top right;
}
</style>
Post a Comment