csstdg5figs/08-backgrounds/background-repeat-round-space-clip.html at f119d6c9a2a80563874f2093e3def24b3265fc6e · meyerweb/csstdg5figs · 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Figure 21</title>
<style type="text/css">
body {margin: 10px;}

div {float: left; height: 110px; width: 110px; margin: 15px; padding: 1em; border: 1px dotted red;
	background-image: url(i/yinyang-sm.png);
	background-origin: padding-box;
}
div:nth-child(2n+1) {clear: left;}

.round {background-repeat: round;}
.space {background-repeat: space;}
.clipc {background-clip: content-box;}
.clipp {background-clip: padding-box;}
.clipb {background-clip: border-box;}

</style>
</head>
<body>

<div id="ex01" class="round clipc"></div>
<div id="ex02" class="round clipp"></div>
<div id="ex04" class="space clipc"></div>
<div id="ex05" class="space clipp"></div>

</body>
</html>