1
2/******************** How to use image sprites? ************************/
3/* For this, you need to position the image so that only a segment of it
4is revealed. This technique also allows you to zoom in on parts of the
5image */
6
7<html>
8 <head>
9 <meta charset="UTF-8" />
10 <title> Title </title>
11 <style>
12
13 #window_1 {
14 height: 120px;
15 width: 117px;
16 background: url("image_path") 0px 0px; /* coordinates of the upper left point: x = 0 and y = 0 */
17 }
18
19 #window_2 {
20 height: 150px;
21 width: 100px;
22 background: url("image_path") -300px -200px; /* coordinates of the upper left point: x = -300 and y = -200 (we use negative numbers) */
23 }
24
25 </style>
26 </head>
27 <body>
28
29 <div id="window_1"></div>
30 <div id="window_2"></div>
31
32 </body>
33</html>