• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS3 Backgrounds</title>
7
    <style>
8
        div {
9
            height: 180px;
10
            width: 220px;
11
            border: 3px solid black;
12
        }
13
        #origin {
14
            background: url(/examples/images/img_monalisa.png);
15
            background-repeat: no-repeat;
16
        }
17
        #contain {
18
            background: url(/examples/images/img_monalisa.png);
19
            background-repeat: no-repeat;
20
            background-size: contain;
21
        }
22
        #cover {
23
            background: url(/examples/images/img_monalisa.png);
24
            background-repeat: no-repeat;
25
            background-size: cover;
26
        }
27
    </style>
28
</head>
29
​
30
<body>
31
​
32
    <h1>background-image 속성값</h1>
33
​
34
    <h3>원래 크기</h3>
35
    <div id="origin">
36
    </div>
37
​
38
    <h3>contain</h3>
39
    <div id="contain">
40
    </div>
41
​
42
    <h3>cover</h3>
43
    <div id="cover">
44
    </div>
45
​
46
</body>
47
​
48
</html>