OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <style> | |
3 #container { | |
4 position: absolute; | |
5 width: 600px; | |
6 height: 550px; | |
7 } | |
8 .test { | |
9 backface-visibility: hidden; | |
10 position: absolute; | |
11 width: 10%; | |
12 height: 8%; | |
13 } | |
14 .image { | |
15 background-image: url(resources/small-apple.jpg); | |
16 top: 0px; | |
17 } | |
18 .generated { | |
19 background-image: linear-gradient(blue, green); | |
20 top: 100px; | |
21 } | |
22 .size-cover { | |
23 background-size: cover; | |
24 left: 50px; | |
25 } | |
26 .size-contain { | |
27 background-size: contain; | |
28 left: 100px; | |
29 } | |
30 .fixed-height { | |
31 background-size: auto 30px; | |
32 left: 150px; | |
33 } | |
34 .percent-height { | |
35 background-size: auto 50%; | |
36 left: 200px; | |
37 } | |
38 .top { | |
39 background-position: left 0px top 10px; | |
40 left: 250px; | |
41 } | |
42 .bottom { | |
43 background-position: left 0px bottom 10px; | |
44 left: 300px; | |
45 } | |
46 .center { | |
47 background-position: center; | |
48 left: 350px; | |
49 } | |
50 .no-repeat { | |
51 background-repeat: no-repeat; | |
52 left: 400px; | |
53 } | |
54 .repeat-space { | |
55 background-repeat: space; | |
56 left: 450px; | |
57 } | |
58 .repeat-round { | |
59 background-repeat: round; | |
60 left: 500px; | |
61 } | |
62 </style> | |
63 <div id="container"> | |
64 <div class="test image"></div> | |
65 <div class="test image size-cover"></div> | |
66 <div class="test image size-contain"></div> | |
67 <div class="test image fixed-height"></div> | |
68 <div class="test image percent-height"></div> | |
69 <div class="test image top"></div> | |
70 <div class="test image bottom"></div> | |
71 <div class="test image center"></div> | |
72 <div class="test image no-repeat"></div> | |
73 <div class="test image repeat-space"></div> | |
74 <div class="test image repeat-round"></div> | |
75 <div class="test generated"></div> | |
76 <div class="test generated cover"></div> | |
77 <div class="test generated contain"></div> | |
78 <div class="test generated fixed-height"></div> | |
79 <div class="test generated percent-height"></div> | |
80 <div class="test generated top"></div> | |
81 <div class="test generated bottom"></div> | |
82 <div class="test generated center"></div> | |
83 <div class="test generated no-repeat"></div> | |
84 <div class="test generated repeat-space"></div> | |
85 <div class="test generated repeat-round"></div> | |
86 </div> | |
OLD | NEW |