Login Background Image Setup Guide

Login Background Image Setup Guide

How to Add Your Custom Background Image

Step 1: Add Your Image File

  1. Choose your image: Select a high-quality image (at least 1920x1080px)
  2. Save location: Put your image in the /Figures/ folder
  3. Rename: Give it a descriptive name like login-background.jpg

Step 2: Update the CSS

The current code references: /Figures/login-background.jpg

To use a different image, change this line in login.html:

background-image: url('/Figures/your-image-name.jpg');

Step 3: Image Recommendations

Best Image Types:

  • ✅ VR/XR themed: VR headsets, virtual environments, futuristic tech
  • ✅ Engineering: Labs, machinery, blueprints, technical diagrams
  • ✅ Academic: University campus, modern classrooms, tech labs
  • ✅ Abstract tech: Digital patterns, circuit boards, holographic effects

Technical Requirements:

  • Resolution: 1920x1080px or higher
  • Format: JPG, PNG, or WebP
  • File size: Under 2MB for fast loading
  • Aspect ratio: 16:9 works best

Step 4: Current Design Features

With the image background, your login page now has:

  • Background image: Covers the full container
  • Dark overlay: Semi-transparent black overlay (40% opacity) for text readability
  • Frosted glass card: White semi-transparent card with blur effect
  • Enhanced shadows: Stronger shadows to make the card stand out

Alternative Background Options

You can also use:

1. Solid Color:

background: #1a1a2e;

2. Gradient (like before):

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

3. Multiple Images (slideshow effect):

background-image: 
    url('/Figures/bg1.jpg'),
    url('/Figures/bg2.jpg');

4. Video Background:

/* Add this in HTML */
<video autoplay muted loop>
    <source src="/assets/videos/background.mp4" type="video/mp4">
</video>

Customizing the Overlay

Adjust the dark overlay opacity in .login-container::before:

background: rgba(0, 0, 0, 0.4); /* Change 0.4 to 0.2 for lighter, 0.6 for darker */

Sample Image Ideas

For XR Engineering course, consider:

  • VR headset on a desk
  • Holographic displays
  • Engineering blueprints
  • Modern tech lab
  • Circuit board patterns
  • Abstract digital art
  • University campus tech building

Just replace /Figures/login-background.jpg with your chosen image path!