Skip to main content

​
Overview

The Web XP desktop background is configured using a CSS background image applied to the main desktop container. The wallpaper is set to cover the entire viewport with a fixed position, mimicking the classic Windows XP desktop experience.

​
Current Wallpaper Setup

​
Default Wallpaper

The default wallpaper is located at: 
src/assets/windowsIcons/wallpaper.jpeg

​
Desktop Container Styling

The wallpaper is applied in the main WinXP container (src/WinXP/index.jsx:297-312): 
import styled from 'styled-components';
import wallpaper from 'assets/windowsIcons/wallpaper.jpeg';

const Container = styled.div`
  font-family: Tahoma, 'Noto Sans', sans-serif;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: relative;
  background: url(${wallpaper}) no-repeat center center fixed;
  background-size: cover;
  animation: ${({ state }) => animation[state]} 5s forwards;
  *:not(input):not(textarea) {
    user-select: none;
  }
`;

​
Key CSS Properties

  • background: url(${wallpaper}) - Sets the image
  • no-repeat - Prevents tiling
  • center center - Centers the image
  • fixed - Fixes background during scroll (if any)
  • background-size: cover - Scales to cover entire viewport

​
Changing the Desktop Background

​
Method 1: Replace the Image File

The simplest approach is to replace the existing wallpaper file:
  1. Prepare your image:
    • Recommended size: 1920x1080 or higher
    • Format: JPEG or PNG
    • Keep file size reasonable (< 500KB for performance)
  2. Replace the file: 
    # Replace with your image
cp your-wallpaper.jpeg src/assets/windowsIcons/wallpaper.jpeg
  3. The change will be reflected immediately in development

​
Method 2: Add New Image and Update Import

  1. Add your wallpaper to the assets folder: 
    cp custom-background.jpg src/assets/windowsIcons/
  2. Update the import in src/WinXP/index.jsx:30: 
    // Change from:
import wallpaper from 'assets/windowsIcons/wallpaper.jpeg';

// To:
import wallpaper from 'assets/windowsIcons/custom-background.jpg';
  3. Save and the new wallpaper will load

​
Method 3: Use External URL

You can also use a URL directly: 
const Container = styled.div`
  background: url('https://example.com/wallpaper.jpg') no-repeat center center fixed;
  background-size: cover;
`;

​
Image Assets Location

​
Windows Icons Directory

The src/assets/windowsIcons/ directory contains:
  • Desktop icons (16x16, 32x32, 48x48)
  • System icons
  • wallpaper.jpeg - Current desktop background
  • User interface elements
Directory structure: 
src/assets/
├── windowsIcons/
│   ├── wallpaper.jpeg    ← Desktop background
│   ├── start.png          ← Start button
│   ├── 111(32x32).png     ← System icons
│   └── ... (100+ icons)
├── sounds/
├── userIcons/
└── minesweeper/

​
Advanced Wallpaper Customization

​
Dynamic Wallpaper Selection

Create a wallpaper selector by storing wallpaper choice in state: 
import { useState } from 'react';
import wallpaper1 from 'assets/windowsIcons/wallpaper.jpeg';
import wallpaper2 from 'assets/windowsIcons/wallpaper2.jpeg';
import wallpaper3 from 'assets/windowsIcons/wallpaper3.jpeg';

function WinXP() {
  const [currentWallpaper, setCurrentWallpaper] = useState(wallpaper1);

  const wallpapers = [
    { id: 1, name: 'Bliss', src: wallpaper1 },
    { id: 2, name: 'Azul', src: wallpaper2 },
    { id: 3, name: 'Friend', src: wallpaper3 },
  ];

  return (
    <Container wallpaperSrc={currentWallpaper}>
      {/* Desktop content */}
    </Container>
  );
}

const Container = styled.div`
  background: url(${props => props.wallpaperSrc}) no-repeat center center fixed;
  background-size: cover;
`;

​
Persist Wallpaper Choice

Save the user’s wallpaper preference to localStorage: 
const [wallpaper, setWallpaper] = useState(() => {
  const saved = localStorage.getItem('desktopWallpaper');
  return saved || defaultWallpaper;
});

useEffect(() => {
  localStorage.setItem('desktopWallpaper', wallpaper);
}, [wallpaper]);

​
Solid Color Backgrounds

For a solid color instead of an image: 
const Container = styled.div`
  background: #5a8ac0; /* Windows XP blue */
  /* Remove background image properties */
`;

​
Gradient Backgrounds

Use CSS gradients for modern effects: 
const Container = styled.div`
  background: linear-gradient(
    to bottom,
    #3a6ea5 0%,
    #5a8ac0 50%,
    #3a6ea5 100%
  );
`;

​
Background Position Options

​
Cover (Current Default)

Scales to cover entire viewport, may crop: 
background-size: cover;

​
Contain

Fits entire image, may show borders: 
background-size: contain;
background-color: #000; /* Fill empty space */

​
Stretch

Stretches to fit (may distort): 
background-size: 100% 100%;

​
Tile

Repeats the image: 
background: url(${wallpaper}) repeat;
background-size: auto;

​
Center (No Scaling)

Displays at original size: 
background: url(${wallpaper}) no-repeat center center;
background-size: auto;

​
Creating a Display Properties Dialog

To build a classic XP-style wallpaper selector: 
function DisplayProperties({ onClose }) {
  const wallpapers = [
    { name: 'Bliss', src: wallpaper1 },
    { name: 'Ascent', src: wallpaper2 },
    { name: 'Autumn', src: wallpaper3 },
  ];

  return (
    <Dialog title="Display Properties">
      <TabControl>
        <Tab label="Desktop">
          <WallpaperList>
            {wallpapers.map(wp => (
              <WallpaperOption
                key={wp.name}
                onClick={() => setWallpaper(wp.src)}
              >
                <Thumbnail src={wp.src} />
                <span>{wp.name}</span>
              </WallpaperOption>
            ))}
          </WallpaperList>
        </Tab>
      </TabControl>
    </Dialog>
  );
}

​
Best Practices

  1. Optimize Image Size: Compress images to reduce load time
  2. Use Appropriate Resolution: 1920x1080 or higher for modern displays
  3. Test Contrast: Ensure desktop icons remain visible
  4. Consider Aspect Ratios: Use cover for varied screen sizes
  5. Provide Fallback: Set a background color for loading states
  6. Avoid Busy Images: Keep backgrounds subtle so icons stand out

​
Image Format Recommendations

  • JPEG: Best for photographs (current default)
    • Smaller file size
    • Good compression
    • No transparency support
  • PNG: Best for graphics with transparency
    • Lossless compression
    • Larger file size
    • Supports transparency
  • WebP: Modern format
    • Better compression than JPEG
    • Supports transparency
    • May need fallback for older browsers

​
Performance Considerations

​
File Size Impact

  • Small (< 200KB): Instant load
  • Medium (200-500KB): Slight delay
  • Large (> 500KB): Noticeable load time

​
Lazy Loading

For multiple wallpapers, lazy load images: 
const [imageSrc, setImageSrc] = useState(null);

useEffect(() => {
  import('assets/windowsIcons/wallpaper.jpeg')
    .then(module => setImageSrc(module.default));
}, []);

​
Classic Windows XP Wallpapers

The original Windows XP included these iconic wallpapers:
  • Bliss - The famous green hills
  • Ascent - Mountain landscape
  • Autumn - Fall foliage
  • Azul - Blue abstract
  • Crystal - Blue pattern
  • Follow - Curved tubes
  • Friend - Golden dog
  • Home - House facade
  • Moon Flower - Pink flower
  • Peace - Beach scene
  • Purple Flower - Iris bloom
  • Radiance - Light burst
  • Stonehenge - Ancient monument
  • Tulips - Red tulips
  • Wind - Desert dunes
You can find these online to recreate an authentic XP experience.
  • src/WinXP/index.jsx - Main desktop container with wallpaper
  • src/assets/windowsIcons/wallpaper.jpeg - Current wallpaper image
  • src/assets/windowsIcons/ - All image assets

Build docs developers (and LLMs) love

Get started for freeTalk to us