frontend: use background-image for image pickers

frontend/src/lib/components/image.svelte

@@ -3,13 +3,13 @@
 
     let { direction = "horisontal", shape = "rounded", image = $bindable() } = $props();
     let files = $state();
-    let img_node = $state();
+    let img_src = $state();
 
     $effect(() => {
         if (files.length > 0) {
             const reader = new FileReader();
             reader.addEventListener("load", function () {
-                img_node.setAttribute("src", reader.result);
+                img_src = reader.result;
             });
             reader.readAsDataURL(files[0]);
             image = files[0];
@@ -17,9 +17,8 @@
 	});
 </script>
 
-<div class="{direction} input img-div {shape}">
+<div class="{direction} input img-div {shape}" style="background-image: url('{img_src}')">
     <AddButton type="image" bind:files/>
-    <img bind:this={img_node} src="" alt="">
 </div>
 
 <style>
@@ -41,14 +40,8 @@
         align-content: center;
         text-align: center;
         width: 11rem;
-    }
-
-    :global(.img-div) img {
-        object-fit: cover;
-        width: 100%;
-    }
-
-    :global(.img-div) :global(.plus) {
-        z-index: 2;
+        background-size: contain;
+        background-position: center;
+        background-repeat: no-repeat;
     }
 </style>