From 262103721a82d698ee77a57373d9c426ffd94ec1 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 28 Aug 2025 15:51:56 +0000
Subject: [PATCH] Simplify background logo display and fix visibility issues

Replaced multiple large, complex background image elements with simpler div elements using CSS for better performance and visibility, addressing user reports of missing logos.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7424866-83d1-4486-a212-ac12b4c7becf
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/d7424866-83d1-4486-a212-ac12b4c7becf/vSDyAYG
---
 client/src/pages/home.tsx | 135 +++++++++++++-------------------------
 1 file changed, 44 insertions(+), 91 deletions(-)

diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 30cfb03..66fe1f1 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -86,107 +86,60 @@ export default function Home() {
 
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative">
         {/* Background logo decorations - fiksni veliki go4.video logoti v ozadju */}
-        {/* OGROMNI logoti z visoko prosojnostjo */}
-        <img 
-          src={go4LogoPath} 
-          alt="" 
+        {/* SUPER PREPROSTI LOGOTI - samo test ali se sploh prikaže */}
+        <div 
           style={{
             position: 'fixed',
-            top: '5%', 
-            left: '0%', 
-            transform: 'rotate(-25deg)',
-            width: '5000px',
-            height: '2500px',
-            pointerEvents: 'none',
-            zIndex: 1,
-            opacity: 0.9,
-            mixBlendMode: 'screen',
-            filter: 'brightness(2) contrast(1.5)'
+            top: '20px', 
+            left: '20px', 
+            width: '800px',
+            height: '400px',
+            backgroundImage: `url(${go4LogoPath})`,
+            backgroundSize: 'contain',
+            backgroundRepeat: 'no-repeat',
+            backgroundPosition: 'center',
+            backgroundColor: 'red',
+            border: '5px solid yellow',
+            zIndex: 9999,
+            opacity: 1
           }}
         />
-        <img 
-          src={go4LogoPath} 
-          alt="" 
+        
+        <div 
           style={{
             position: 'fixed',
-            top: '10%', 
-            right: '0%', 
-            transform: 'rotate(30deg)',
-            width: '4500px',
-            height: '2250px',
-            pointerEvents: 'none',
-            zIndex: 1,
-            opacity: 0.8,
-            mixBlendMode: 'screen',
-            filter: 'brightness(2) contrast(1.5)'
+            top: '50%', 
+            left: '50%', 
+            transform: 'translate(-50%, -50%) rotate(-30deg)',
+            width: '1200px',
+            height: '600px',
+            backgroundImage: `url(${go4LogoPath})`,
+            backgroundSize: 'contain',
+            backgroundRepeat: 'no-repeat',
+            backgroundPosition: 'center',
+            backgroundColor: 'rgba(255, 165, 0, 0.5)',
+            border: '3px solid orange',
+            zIndex: 100,
+            opacity: 0.8
           }}
         />
-        <img 
-          src={go4LogoPath} 
-          alt="" 
+        
+        <div 
           style={{
             position: 'fixed',
-            top: '40%', 
-            left: '-10%', 
-            transform: 'rotate(18deg)',
-            width: '4800px',
-            height: '2400px',
-            pointerEvents: 'none',
-            zIndex: 1,
-            opacity: 0.7,
-            mixBlendMode: 'screen',
-            filter: 'brightness(2) contrast(1.5)'
-          }}
-        />
-        <img 
-          src={go4LogoPath} 
-          alt="" 
-          style={{
-            position: 'fixed',
-            top: '45%', 
-            right: '-10%', 
-            transform: 'rotate(-35deg)',
-            width: '4200px',
-            height: '2100px',
-            pointerEvents: 'none',
-            zIndex: 1,
-            opacity: 0.6,
-            mixBlendMode: 'screen',
-            filter: 'brightness(2) contrast(1.5)'
-          }}
-        />
-        <img 
-          src={go4LogoPath} 
-          alt="" 
-          style={{
-            position: 'fixed',
-            bottom: '5%', 
-            left: '5%', 
-            transform: 'rotate(-15deg)',
-            width: '4600px',
-            height: '2300px',
-            pointerEvents: 'none',
-            zIndex: 1,
-            opacity: 0.5,
-            mixBlendMode: 'screen',
-            filter: 'brightness(2) contrast(1.5)'
-          }}
-        />
-        <img 
-          src={go4LogoPath} 
-          alt="" 
-          style={{
-            position: 'fixed',
-            bottom: '10%', 
-            right: '3%', 
-            transform: 'rotate(22deg)',
-            width: '4000px',
-            height: '2000px',
-            pointerEvents: 'none',
-            zIndex: 1,
-            opacity: 0.4,
-            mixBlendMode: 'screen',
-            filter: 'brightness(2) contrast(1.5)'
+            bottom: '20px', 
+            right: '20px', 
+            transform: 'rotate(45deg)',
+            width: '600px',
+            height: '300px',
+            backgroundImage: `url(${go4LogoPath})`,
+            backgroundSize: 'contain',
+            backgroundRepeat: 'no-repeat',
+            backgroundPosition: 'center',
+            backgroundColor: 'rgba(255, 100, 0, 0.3)',
+            border: '2px solid red',
+            zIndex: 50,
+            opacity: 0.6
           }}
         />