Add back property

Author: sylvainjule

README.md

@@ -123,7 +123,17 @@ myimageboxes:
   fit: cover
 ```
 
-#### 4.3. `mobile`
+#### 4.3. `back`
+
+Defines the background behind transparent / contained images. Accepts any CSS-valid property for the `background` property. Default is `false`.
+
+```yaml
+myimageboxes:
+  type: imageboxes
+  back: white # or '#fefefe', or 'rgb(255, 0, 255)', etc.
+```
+
+#### 4.4. `mobile`
 
 By default, images are not displayed when the panel switches to its mobile view. Not recommended, but if you want to override this, set the option to `true`.
 
@@ -133,7 +143,7 @@ myimageboxes:
   mobile: false
 ```
 
-#### 4.4. `gap`
+#### 4.5. `gap`
 
 ![gap](https://user-images.githubusercontent.com/14079751/48333926-58bc1880-e659-11e8-8920-6ad913c63529.jpg)
 

index.js

@@ -19,6 +19,9 @@
         'fit' => function($fit = 'cover') {
             return $fit;
         },
+        'back' => function($back = false) {
+            return $back;
+        },
         'gap' => function($gap = false) {
             return $gap;
         },

lib/fields/imageboxes.php

@@ -12,6 +12,7 @@ export default {
         gap: Boolean,
         mobile: Boolean,
         ratio: Number,
+        back: [Boolean, String]
     }
 };
 </script>

src/components/field/ImageBoxes.vue

@@ -3,7 +3,7 @@
         <figure :class="['k-checkbox-image-ctn', {'mobile-show': mobile}]">
             <figure class="k-checkbox-image" :style="padding">
                 <img :src="image" :class="fit" alt="">
-                <div class="background"></div>
+                <div class="background" :style="background"></div>
             </figure>
         </figure>
         <div>
@@ -32,6 +32,12 @@ export default {
         mobile: Boolean,
         padding: String,
         image: String,
+        back: [Boolean, String]
     },
+    computed: {
+        background() {
+            return this.back ? 'background:'+ this.back +';' : false
+        },
+    }
 }
 </script>

src/components/input/ImageBoxInput.vue

@@ -10,6 +10,7 @@
                 :ratio="ratio"
                 :mobile="mobile"
                 :padding="padding"
+                :back="back"
                 @input="onInput(option.value, $event)"
             />
         </li>
@@ -23,6 +24,7 @@ export default {
         fit: String,
         ratio: Number,
         mobile: Boolean,
+        back: [Boolean, String],
     },
     computed: {
         padding() {