HTML/test_background.html at main · ksj2001/HTML · 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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>background 연습</title>
    <style>
        body{
            background-image: url(images/background-size.jpg);
            background-repeat: no-repeat;
            background-size: auto;
            background-position:  bottom center;
            background-attachment: fixed;
            /*background-color: #0094ff;*/
            margin: 50px;
        }
        div{
            width: 900px;
            height: 800px;
            border: 1px solid red;


        }
        div {
            display: inline-block;
            margin: 20px;
        }
        .gradient1 {
            width: 300px;
            height: 300px;
            /* linear gradient */
            background: linear-gradient(to right bottom, blue, pink);
        }
        .gradient2 {
            width: 300px;
            height: 300px;
            /* linear gradient */
            background: linear-gradient(135deg, blue, pink);
        }
        /*
        div{
            width: 90%;
            background-color: #fff;
            padding: 20px;
            border: 10px dashed green;
            background-clip: border-box;
        }
        div h1{
            text-transform: uppercase;
        }
        div p{
            line-height: 150%};
            */
    </style>
</head>
<body>
    <div class="gradient1"></div>
    <div class="gradient2"></div>
    <div>
        <!----
        <h1>css backgound-color example </h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident illo, perspiciatis aspernatur exercitationem
            quis sint quidem rem voluptatum placeat delectus id pariatur sapiente cumque a beatae, iste ad molestias autem
            aliquam sunt sit animi!
            Deserunt illo est quod sed laboriosam dicta a obcaecati, porro nesciunt maxime adipisci? Quasi totam voluptatum
            quos alias tempore nam possimus qui nulla nesciunt dicta quam, mollitia itaque, nostrum eum deleniti unde
            voluptate adipisci quod fuga aliquam sed. Eligendi, id fugit accusantium quidem nostrum tempore. Temporibus
            veniam necessitatibus obcaecati voluptas velit, commodi saepe reprehenderit impedit asperiores perspiciatis quos
            quaerat voluptate, quae repudiandae nisi quibusdam harum hic.
        </p>
         -->
    </div>
</body>
</html>