diff --git a/ui/data.js b/ui/data.js
index 56843ed8..f0cae5b2 100755
--- a/ui/data.js
+++ b/ui/data.js
@@ -1163,7 +1163,7 @@ function updateImage(image, gid, size, sync){
// async load...
} else {
// NOTE: storing the url in .data() makes the image load the
- // last preview and last preview only in the case that we
+ // last preview and in a case when we
// manage to call updateImage(...) on the same element
// multiple times before the previews get loaded...
// ...setting the data().loading is sync while loading an
diff --git a/ui/experiments/seporate-image-and-background.html b/ui/experiments/seporate-image-and-background.html
index e242f096..5ab77e23 100755
--- a/ui/experiments/seporate-image-and-background.html
+++ b/ui/experiments/seporate-image-and-background.html
@@ -98,6 +98,47 @@
/*********************************************************************/
+.image3 div,
+.image3 {
+ position: relative;
+ display: inline-block;
+ vertical-align: middle;
+ text-align:left;
+ width: 300px;
+ height: 300px;
+ font-size: 12pt;
+ overflow: hidden;
+
+ box-sizing: border-box;
+ color: white;
+ background: black;
+
+ text-shadow: black 0.1em 0.1em 0.4em, black 0.1em 0.1em;
+
+ border: solid black 5px;
+}
+.image3 div {
+ position: absolute;
+
+ width: 100%;
+ height: 100%;
+
+ background: no-repeat 50% transparent;
+ background-size: contain;
+ border: none;
+
+ -webkit-filter: invert(1);
+}
+.current.image3 {
+ background: no-repeat 50% black;
+ background-size: contain;
+
+ /* XXX remove this... */
+ border: solid red 5px;
+}
+
+
+
@@ -114,5 +155,21 @@
+
+
+
+ Add a seporate bg tag
+ - this effectively doubles the number of tags used for a ribbon...
+ + the only API that needs changing is what deals with previews and filters
+ + will simplify different image indicator CSS
+ + will remove LOTS of code dealing with scaling, sizing and rotation... this will not change!
+
+
+