wbamberg
diff --git a/‎images/image-set-type.html
Lines changed: 49 additions & 0 deletions b/‎images/image-set-type.html
Lines changed: 49 additions & 0 deletions
diff --git a/‎images/large-balloons.avif
38.9 KB b/‎images/large-balloons.avif
38.9 KB
@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>image-set() type()</title>
+    <link rel="stylesheet" href="styles.css">
+    <style>
+        .box {
+            width: 400px;
+            height: 200px;
+            background-repeat: no-repeat;
+            background-size: cover;
+        }
+    </style>
+
+    <style class="editable">
+       .box {
+          background-image: image-set(
+            url("large-balloons.avif") type("image/avif"),
+            url("large-balloons.jpg") type("image/jpeg"));
+        }
+    </style>
+</head>
+
+<body>
+    <section class="preview">
+        <div class="box"></div>
+    </section>
+
+    <textarea class="playable playable-css" style="height: 150px;">
+.box {
+  background-image: image-set(
+    url("large-balloons.avif") type("image/avif"),
+    url("large-balloons.jpg") type("image/jpeg"));
+}
+    </textarea>
+
+    <textarea class="playable playable-html" style="height: 70px;">
+<div class="box"></div>
+    </textarea>
+
+    <div class="playable-buttons">
+        <input id="reset" type="button" value="Reset">
+    </div>
+</body>
+<script src="playable.js"></script>
+
+</html>