coolCSS/10-multiple-backgrounds.html at master · Sayak7D1/coolCSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8"/>
		<title>Awesome CSS3 Features You Can Finally Use</title>

		<link href="assets/css/style.css" rel="stylesheet" />

		<style>
			.space{

				/* Pass a comma separated list of backgrounds: */
				background:url('assets/img/rocket_big.png') no-repeat center 70px, url('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;
			}
		</style>

	</head>

	<body>

		<h1>Multiple Backgrounds</h1>

		<div class="space"></div>

		<footer>
            <a href="http://tutorialzine.com/2013/10/12-awesome-css3-features-you-can-finally-use/">Awesome CSS3 Features You Can Finally Use</a>
        </footer>

	</body>
</html>