-
Notifications
You must be signed in to change notification settings - Fork 0
/
background-attachment.html
82 lines (82 loc) · 2.83 KB
/
background-attachment.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Background Attachment</title>
<style>
body {
margin: 0;
}
.first {
height: 100vh;
background-image: url("bg-2.jpeg");
background-position: center;
background-size: cover;
background-attachment: fixed;
}
.first h1 {
font-size: 35px;
letter-spacing: 10px;
padding: 20px;
background-color: #111;
color: #fff;
position: absolute;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-transform: uppercase;
}
.second {
height: 50vh;
background-image: url("bg-3.jpeg");
background-position: center;
background-size: cover;
background-attachment: fixed;
}
.box {
padding: 50px 80px;
text-align: center;
background-color: #fff;
color: #777;
}
</style>
</head>
<body>
<div class="first">
<h1>Lorem, ipsum.</h1>
</div>
<div class="box">
<h3>Lorem, ipsum dolor.</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat in quod
unde ducimus? Tenetur quae excepturi autem deleniti quam officiis
officia. Soluta deserunt laboriosam error facilis ipsum corrupti
recusandae cum. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nihil enim repudiandae deserunt, perspiciatis natus alias quos iure quis
neque fugit voluptatum incidunt molestiae, provident tempore velit nam
iste ipsa error. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Ea a, modi porro iure obcaecati nulla facere quis iste officia
vitae quibusdam cum, ad quia reiciendis itaque, ex aut nihil maiores!
</p>
</div>
<div class="second"></div>
<div class="box">
<h3>Lorem, ipsum dolor.</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat in quod
unde ducimus? Tenetur quae excepturi autem deleniti quam officiis
officia. Soluta deserunt laboriosam error facilis ipsum corrupti
recusandae cum. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Sed, adipisci quos esse optio dolore, cupiditate fugiat, enim autem
numquam nisi veniam vel praesentium vero? Numquam sapiente et quod ad
minus? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eum
quibusdam fuga tempore quam voluptatum doloremque autem, molestias
debitis maxime quas veritatis nostrum cum facilis aliquam quae illum
corrupti laborum voluptates?
</p>
</div>
</body>
</html>