/* ═══════════════════════════════════════════════════════════════ GRAND VIP | RP Simulator — Page Background Images Config ═══════════════════════════════════════════════════════════════ HOW TO USE — TWO WAYS: OPTION A — Local file uploaded to Cloudflare Pages: 1. Upload your image (e.g. home-bg.jpg) to the SAME folder as index.html 2. Uncomment the line for that page and write just the filename: #page-home { background-image: url('home-bg.jpg'); } OPTION B — Direct image URL from the internet: 1. Paste the full link (must start with https://) instead of a filename: #page-home { background-image: url('https://example.com/photo.jpg'); } 2. Make sure the URL points directly to the image file (ends in .jpg/.png/.webp), not to a webpage that merely displays the image. Either way, just remove the /* and */ around the line you want active, then deploy index.html + page-bg.css together. SUPPORTED FORMATS: .jpg .jpeg .png .webp RECOMMENDED SIZE: 1920x1080px or larger ═══════════════════════════════════════════════════════════════ */ /* ── Applied automatically to pages WITH a background-image set ── NOTE: background-attachment is intentionally NOT set to "fixed" — that property fails to render at all on most mobile browsers (Android Chrome included) when applied to a non- element with an overflow:hidden ancestor. Using normal scroll attachment instead, which works reliably everywhere. */ .gv-page-bg { background-repeat: no-repeat; background-size: cover; background-position: center center; } /* ── Dark overlay — only shows when .gv-page-bg is active ── Increase rgba alpha (0.65) if text is hard to read */ .gv-page-bg::before { content: ''; position: fixed; inset: 0; background: rgba(2, 8, 24, 0.65); z-index: 0; pointer-events: none; } /* ══════════════════════════════════════════════════════════════ SET YOUR IMAGES BELOW Remove the /* comment markers from the page you want ══════════════════════════════════════════════════════════════ */ /* 🏠 Home Page */ #page-home { background-image: url('GrandVIP.jpg'); } /* ⭐ Services Page */ #page-services { background-image: url('services-bg.jpg'); } /* 📰 News Page */ #page-news { background-image: url('news-bg.jpg'); } /* 📖 Beginners Guide */ #page-guide { background-image: url('guide-bg.jpg'); } /* ❓ FAQ Page */ #page-faq { background-image: url('faq-bg.jpg'); } /* 👥 About Page */ #page-about { background-image: url('about-bg.jpg'); } /* 📩 Contact Page */ #page-contact { background-image: url('contact-bg.jpg'); } /* 💳 Payments & Purchases */ #page-payments { background-image: url('payments-bg.jpg'); } /* 👤 Account Issues */ #page-account { background-image: url('account-bg.jpg'); } /* 🚗 Vehicles Page */ #page-vehicles { background-image: url('vehicles-bg.jpg'); } /* 🏠 Real Estate Page */ #page-realestate { background-image: url('realestate-bg.jpg'); } /* 💼 Jobs Page */ #page-jobs { background-image: url('jobs-bg.jpg'); } /* ⚙️ Game Systems Page */ #page-systems { background-image: url('systems-bg.jpg'); } /* ⚠️ Violations Page */ #page-violations { background-image: url('violations-bg.jpg'); } /* 📜 Terms & Conditions */ #page-terms { background-image: url('terms-bg.jpg'); } /* 🔒 Privacy Policy */ #page-privacy { background-image: url('privacy-bg.jpg'); } /* 🔐 Staff Portal */ #page-staff { background-image: url('staff-bg.jpg'); }