docs: update readme

README.md

@@ -2,7 +2,7 @@
 
 A browser-based tool for generating CSS `matrix3d()` transforms with perspective projection. Define 4 corners on a field and a widget size — get ready-to-use CSS code.
 
-**Keywords:** CSS matrix3d, perspective transform, 3D CSS, homography, quadrilateral mapping, CSS transform generator, perspective projection, CSS 3D effects
+**Keywords:** CSS matrix3d, perspective transform, 3D CSS, homography, quadrilateral mapping, CSS transform generator, perspective projection, CSS 3D effects, background image, perspective mockup, CSS perspective tool
 
 ## Usage
 
@@ -20,8 +20,40 @@ Copy the CSS from the "CSS Output" section and paste into your project.
 - Drag-and-drop corner positioning
 - Editable field dimensions with aspect ratio lock
 - Rescale coordinates option when resizing the field
+- **Background image upload** — load an image onto the field for visual reference
+- **Widget image upload** — load an image into the widget with auto-sizing
+- Three upload methods: file picker, Ctrl+V paste, drag & drop
+- **Object-fit options** — contain, cover, fill, none, scale-down
 - Zero dependencies, runs in any modern browser
 
+## Background Image
+
+Load a background image onto the field to use as a reference when positioning corners. Useful for matching perspective of existing screenshots or photos.
+
+**How to upload:**
+
+- Click "Load Image" and select a file
+- Press Ctrl+V to paste from clipboard
+- Drag & drop an image file onto the left column or the Background panel
+
+**Adjust fit:**
+
+- Use the object-fit dropdown to control how the image scales: contain, cover, fill, none, or scale-down
+
+## Widget Image
+
+Load an image directly into the widget. When an image is loaded, the widget dimensions (W/H) automatically match the image size and become locked.
+
+**How to upload:**
+
+- Click "Load Image" in the Widget panel
+- Click the paste input field and press Ctrl+V
+- Drag & drop an image file onto the Widget panel
+
+**To remove:**
+
+- Click "Remove" to clear the widget image and unlock dimensions
+
 ## Use Cases
 
 - **Presentations & landing pages** — render a widget or screenshot on a monitor at any angle
@@ -30,6 +62,7 @@ Copy the CSS from the "CSS Output" section and paste into your project.
 - **App previews** — place mobile UI on a device background
 - **Scroll-based effects** — animate matrix3d for 3D effects without WebGL
 - **Mockups & prototypes** — visually place interfaces in context (on a wall, laptop, banner)
+- **Perspective matching** — load a photo of a screen, align corners, get the exact CSS transform
 
 ## Project Structure
 
@@ -44,12 +77,12 @@ Copy the CSS from the "CSS Output" section and paste into your project.
     ├── drag.js          — drag handling
     ├── inputs.js        — input fields
     ├── preview.js       — live preview
-    └── ui.js            — buttons and modes
+    └── ui.js            — buttons, modes, image upload
 ```
 
 ## How It Works
 
-The tool uses [homography](https://en.wikipedia.org/wiki/Homography_(computer_vision)) to compute a 3D perspective transform from 4 corresponding points. The resulting `matrix3d()` CSS property maps a rectangular widget onto an arbitrary quadrilateral defined by the user.
+The tool uses [homography](<https://en.wikipedia.org/wiki/Homography_(computer_vision)>) to compute a 3D perspective transform from 4 corresponding points. The resulting `matrix3d()` CSS property maps a rectangular widget onto an arbitrary quadrilateral defined by the user.
 
 ## License