diff --git a/public/assets/bg/bg1.jpg b/public/assets/bg/bg1.jpg
new file mode 100644
index 0000000..40c2918
Binary files /dev/null and b/public/assets/bg/bg1.jpg differ
diff --git a/public/assets/bg/bg2.jpg b/public/assets/bg/bg2.jpg
new file mode 100644
index 0000000..6cda2c6
Binary files /dev/null and b/public/assets/bg/bg2.jpg differ
diff --git a/public/assets/bg/bg3.jpg b/public/assets/bg/bg3.jpg
new file mode 100644
index 0000000..70d34a1
Binary files /dev/null and b/public/assets/bg/bg3.jpg differ
diff --git a/public/assets/bg/bg4.jpg b/public/assets/bg/bg4.jpg
new file mode 100644
index 0000000..9ffd53e
Binary files /dev/null and b/public/assets/bg/bg4.jpg differ
diff --git a/views/index.ejs b/views/index.ejs
index 817f868..1af7233 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -37,7 +37,8 @@
     .player-col { width: min(900px, 100%); margin: 0 auto; }
     .player-frame { position: relative; aspect-ratio: 16/9; overflow: hidden; isolation: isolate; background: #0A0A0A; }
     .player-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; background:#000; }
-    .stage-poster { position: absolute; inset: 0; width:100%; height:100%; object-fit: cover; z-index: 0; }
+    .stage-poster { position: absolute; inset: 0; width:100%; height:100%; object-fit: cover; z-index: 0; opacity: 1; transition: opacity 1.2s ease; }
+    .stage-poster.b { opacity: 0; }
     .scrim { position: absolute; inset: 0; z-index: 1; background: rgba(10,10,10,0.28); pointer-events:none; }
     .msg { position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:rgba(10,10,10,0.55); color:#fff; font-size:13px; letter-spacing:0.1em; text-transform:uppercase; }
     .msg.hidden { display:none; }
@@ -70,7 +71,8 @@
   <main class="stage-wrap">
    <div class="player-col">
     <div class="player-frame" id="playerFrame">
-      <img class="stage-poster" id="poster" src="/assets/stage_folx_v2.png" alt="" />
+      <img class="stage-poster" id="posterA" src="/assets/bg/bg1.jpg" alt="" />
+      <img class="stage-poster b" id="posterB" src="/assets/bg/bg2.jpg" alt="" />
       <div class="scrim"></div>
       <video id="v" autoplay muted playsinline tabindex="-1" disablepictureinpicture
              controlsList="nodownload noremoteplayback noplaybackrate"></video>
@@ -107,11 +109,24 @@
   var HLS_URL = <%- JSON.stringify(hlsUrl) %>;
   var video = document.getElementById('v');
   var msg = document.getElementById('msg');
-  var poster = document.getElementById('poster');
+  var posterA = document.getElementById('posterA');
+  var posterB = document.getElementById('posterB');
   var hls = null;
-  function hideMsg(){ msg.classList.add('hidden'); poster.style.display='none'; }
+  function hideMsg(){ msg.classList.add('hidden'); posterA.style.display='none'; posterB.style.display='none'; }
   function showMsg(){ msg.classList.remove('hidden'); }
 
+  // Rotirajoce ozadje (crossfade) dokler se video ne nalozi
+  var bgList = ['/assets/bg/bg1.jpg','/assets/bg/bg2.jpg','/assets/bg/bg3.jpg','/assets/bg/bg4.jpg'];
+  var bgIdx = 1, showingA = true;
+  bgList.forEach(function(s){ var im = new Image(); im.src = s; }); // predpomni
+  setInterval(function(){
+    if (posterA.style.display === 'none') return; // video tece, ne rotiraj
+    bgIdx = (bgIdx + 1) % bgList.length;
+    if (showingA) { posterB.src = bgList[bgIdx]; posterB.classList.remove('b'); posterA.classList.add('b'); }
+    else { posterA.src = bgList[bgIdx]; posterA.classList.remove('b'); posterB.classList.add('b'); }
+    showingA = !showingA;
+  }, 4000);
+
   function start(){
     try { hls && hls.destroy(); } catch(e){}
     hls = null;