-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathCSS-backgrounds.html
81 lines (81 loc) · 4.52 KB
/
CSS-backgrounds.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Background & Gradients</title>
<style>
div {
height: 50rem;
color: chartreuse;
background-color: brown;
background-image: url('img/pencil.png');
background-repeat: no-repeat;
background-position: 100% 100%; /*position: right bottom*/
}
#div2 {
/* Short hand background properties*/
background: green url(img/birds.png) 0 100% no-repeat;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, minima
aperiam aut magnam optio ipsam exercitationem fugit animi minus iusto,
dignissimos sapiente consequuntur aspernatur eligendi aliquam mollitia non
ullam voluptatum?Lorem ipsum dolor sit amet consectetur adipisicing elit.
Hic iste veritatis fugiat? Vitae voluptatem placeat, blanditiis qui culpa
quisquam ab itaque officia libero eveniet nostrum accusamus magnam ullam
autem rerum? Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nobis, minima aperiam aut magnam optio ipsam exercitationem fugit animi
minus iusto, dignissimos sapiente consequuntur aspernatur eligendi aliquam
mollitia non ullam voluptatum?Lorem ipsum dolor sit amet consectetur
adipisicing elit. Hic iste veritatis fugiat? Vitae voluptatem placeat,
blanditiis qui culpa quisquam ab itaque officia libero eveniet nostrum
accusamus magnam ullam autem rerum? Lorem ipsum dolor sit amet consectetur
adipisicing elit. Nobis, minima aperiam aut magnam optio ipsam
exercitationem fugit animi minus iusto, dignissimos sapiente consequuntur
aspernatur eligendi aliquam mollitia non ullam voluptatum?Lorem ipsum
dolor sit amet consectetur adipisicing elit. Hic iste veritatis fugiat?
Vitae voluptatem placeat, blanditiis qui culpa quisquam ab itaque officia
libero eveniet nostrum accusamus magnam ullam autem rerum? Lorem ipsum
dolor sit amet consectetur adipisicing elit. Nobis, minima aperiam aut
magnam optio ipsam exercitationem fugit animi minus iusto, dignissimos
sapiente consequuntur aspernatur eligendi aliquam mollitia non ullam
voluptatum?Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic
iste veritatis fugiat? Vitae voluptatem placeat, blanditiis qui culpa
quisquam ab itaque officia libero eveniet nostrum accusamus magnam ullam
autem rerum?
</div>
<br />
<div id="div2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, minima
aperiam aut magnam optio ipsam exercitationem fugit animi minus iusto,
dignissimos sapiente consequuntur aspernatur eligendi aliquam mollitia non
ullam voluptatum?Lorem ipsum dolor sit amet consectetur adipisicing elit.
Hic iste veritatis fugiat? Vitae voluptatem placeat, blanditiis qui culpa
quisquam ab itaque officia libero eveniet nostrum accusamus magnam ullam
autem rerum? Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nobis, minima aperiam aut magnam optio ipsam exercitationem fugit animi
minus iusto, dignissimos sapiente consequuntur aspernatur eligendi aliquam
mollitia non ullam voluptatum?Lorem ipsum dolor sit amet consectetur
adipisicing elit. Hic iste veritatis fugiat? Vitae voluptatem placeat,
blanditiis qui culpa quisquam ab itaque officia libero eveniet nostrum
accusamus magnam ullam autem rerum? Lorem ipsum dolor sit amet consectetur
adipisicing elit. Nobis, minima aperiam aut magnam optio ipsam
exercitationem fugit animi minus iusto, dignissimos sapiente consequuntur
aspernatur eligendi aliquam mollitia non ullam voluptatum?Lorem ipsum
dolor sit amet consectetur adipisicing elit. Hic iste veritatis fugiat?
Vitae voluptatem placeat, blanditiis qui culpa quisquam ab itaque officia
libero eveniet nostrum accusamus magnam ullam autem rerum? Lorem ipsum
dolor sit amet consectetur adipisicing elit. Nobis, minima aperiam aut
magnam optio ipsam exercitationem fugit animi minus iusto, dignissimos
sapiente consequuntur aspernatur eligendi aliquam mollitia non ullam
voluptatum?Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic
iste veritatis fugiat? Vitae voluptatem placeat, blanditiis qui culpa
quisquam ab itaque officia libero eveniet nostrum accusamus magnam ullam
autem rerum?
</div>
</body>
</html>