webScroll/2_3_bg_fixed_practice.html at main · p4css/webScroll · 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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="fixed.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- self-defined js -->
    <script src="fixed.js"></script>
    <style>
        .jumbotron {
            margin-bottom: 0px;
            background-color: coral;
            color: white;
        }

        #sky {
            background: #000 url("assets/sky.jpg") center top;
            z-index=-2;
            background-attachment: fixed;
            background-position: top;
            background-size: cover;
            /*    min-height: 1000px;*/
            width: 100%;
            padding-right: 0px;
            padding-top: 0px;

        }

        #sky .row div:first-child {
            /*    position:relative;*/
            min-height: 1000px;
        }

        #sky .row div:last-child {
            z-index: 2;
            color: white;
            background-color: rgba(0, 0, 0, 0.5);
            min-height: 1000px;
        }


        #sky img {
            position: fixed;
            width: 40%;
        }

        footer {
            background-color: coral;
            color: white;
            min-height: 800px;

        }


        #naruto-left {
            /*    background: #000 url("https://i.ytimg.com/vi/EJyNH-r_7Ek/maxresdefault.jpg") left top;*/
            /*    background-position: -200% 0%;*/
            background: #000 url("assets/naruto.jpg") left top;
            min-height: 800px;
            background-attachment: fixed;

        }

        #naruto-right {
            background: #000 url("assets/naruto.jpg") right top;
            min-height: 800px;
            background-attachment: fixed;
        }

        #naruto {
            background-color: coral;
        }
    </style>
</head>

<body>
    <div class="jumbotron text-center">
        <h1>Test for fixed background</h1>
        <!--        <img class="mx-auto d-block" src="img/rocket.png">-->
    </div>


    <div id="sky" class="container-fluid">
        <div class="row">
            <div class="col-sm-4">
                <!--                <img src="http://www.321rockets.com/content/image/29766/800/002162_main_1.png">-->
                <img class="mx-auto d-block" src="assets/rocket.png">
            </div>
            <div class="col-sm-8">
                <h1>Sky story</h1>
            </div>
        </div>
    </div>

    <div class="jumbotron text-center">
        <h1>Test for two parallel divs</h1>
    </div>

    <div id="naruto" class="container-fluid">
        <div class="row">
            <div id="naruto-left" class="col-sm-4"></div>
            <div class="col-sm-4"></div>
            <div id="naruto-right" class="col-sm-4"></div>
        </div>
    </div>

    <footer class="container-fluid text-center">
        <p>Made By ji-lung</p>
    </footer>
</body>

</html>