summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMichael Drake <tlsa@netsurf-browser.org>2009-05-26 20:12:13 (GMT)
committer Michael Drake <tlsa@netsurf-browser.org>2009-05-26 20:12:13 (GMT)
commitf70a2560dc08f2f7434488889598b2b8b0c24213 (patch)
tree5e24f5db32988df34d1ef37f95a38e5627e71562
parentc11dc58c5def750a3d174b6ba3f4e28ae434e449 (diff)
downloadnetsurftest-f70a2560dc08f2f7434488889598b2b8b0c24213.tar.gz
netsurftest-f70a2560dc08f2f7434488889598b2b8b0c24213.tar.bz2
Background position and repeat.
svn path=/trunk/netsurftest/; revision=7551
-rw-r--r--images/circle.pngbin0 -> 2230 bytes
-rw-r--r--works/background-position-repeat.html110
2 files changed, 110 insertions, 0 deletions
diff --git a/images/circle.png b/images/circle.png
new file mode 100644
index 0000000..6272c72
--- a/dev/null
+++ b/images/circle.png
Binary files differ
diff --git a/works/background-position-repeat.html b/works/background-position-repeat.html
new file mode 100644
index 0000000..51043d4
--- a/dev/null
+++ b/works/background-position-repeat.html
@@ -0,0 +1,110 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<style>
+body {
+ background: #666; }
+
+p {
+ margin: 1em;
+ float: left;
+ border: 10px transparent solid;
+ width: 130px;
+ height: 130px;
+ background-color: #000;
+ background-image:url(../images/3x3.png);
+ padding:5px;
+ color: #fff; }
+
+p.circle {
+ border: 0;
+ width: 150px;
+ height: 150px;
+ background-image:url(../images/circle.png); }
+
+p.circle span {
+ display: block;
+ padding: 10px;
+ background-image:url(../images/circle.png); }
+
+</style>
+<body>
+
+<p style="background-position:top left;">
+<span>repeat-x and repeat-y, top left</span>
+</p>
+
+<p style="background-repeat:no-repeat;background-position:top left;">
+<span>no repeat, top left</span>
+</p>
+
+<p style="background-repeat:no-repeat;background-position:top right;">
+<span>no repeat, top right</span>
+</p>
+
+<p style="background-repeat:no-repeat;background-position:bottom left;">
+<span>no repeat, bottom left</span>
+</p>
+
+<p style="background-repeat:no-repeat;background-position:bottom right;">
+<span>no repeat, bottom right</span>
+</p>
+
+<p style="background-repeat:no-repeat;background-position:center center;">
+<span>no repeat, center</span>
+</p>
+
+<p style="background-repeat:repeat-x;background-position:center center;">
+<span>repeat-x, center</span>
+</p>
+
+<p style="background-repeat:repeat-y;background-position:center center;">
+<span>repeat-y, center</span>
+</p>
+
+<p style="background-repeat:repeat-y;background-position:0% 0%;">
+<span>repeat-y, 0% 0%</span>
+</p>
+
+<p style="background-repeat:repeat-x;background-position:20% 20%;">
+<span>repeat-x, 20% 20%</span>
+</p>
+
+<p style="background-repeat:repeat-y;background-position:40% 40%;">
+<span>repeat-y, 40% 40%</span>
+</p>
+
+<p style="background-repeat:repeat-x;background-position:60% 60%;">
+<span>repeat-x, 60% 60%</span>
+</p>
+
+<p style="background-repeat:repeat-y;background-position:80% 80%;">
+<span>repeat-y, 80% 80%</span>
+</p>
+
+<p style="background-repeat:repeat-x;background-position:100% 100%;">
+<span>repeat-x, 100% 100%</span>
+</p>
+
+<p style="background-repeat:repeat-x;background-position:75% 100%;">
+<span>repeat-x, 75% 100%</span>
+</p>
+
+<p style="background-repeat:repeat-y;background-position:100% 25%;">
+<span>repeat-y, 100% 25%</span>
+</p>
+
+<p class="circle" style="background-position:top left;">
+<span>repeat-x and repeat-y, top left</span>
+</p>
+
+<p class="circle" style="background-position:bottom right;">
+<span>repeat-x and repeat-y, bottom right</span>
+</p>
+
+<p class="circle" style="background-position:center center;">
+<span>repeat-x and repeat-y, center</span>
+</p>
+
+</body>
+</html> \ No newline at end of file