Sprite Positioner

Visually align CSS sprite sheets, drag to position, and auto-generate background-position CSS with a live editor.

Sprite Positioner is a developer tool that simplifies working with CSS sprites and background images by providing a visual editing interface directly on any webpage. Instead of manually adjusting background-position values in DevTools, Sprite Positioner allows you to interactively move and align sprite sheets while seeing the results instantly. Select any element on the page, load a sprite sheet or background image, and drag it into position with real-time visual feedback. The extension automatically reads the element’s existing background properties — including background-image, position, size, and repeat — allowing you to modify and refine styles that already exist in the page. A built-in live CSS editor lets you edit styles directly, apply them to the selected element, and copy the final CSS once the alignment is correct Sprite Positioner is especially useful when working with sprite-based interfaces, legacy UI systems, and background positioning issues, where manually adjusting CSS values can be slow and frustrating. Key Features - Select any element on the current webpage - Visually align CSS sprite sheets and background images - Drag to update background-position in real time - Resize background images with live preview - Lock X or Y axis for precise adjustments - Automatically read existing background CSS from elements - Generate clean, ready-to-use CSS instantly - Built-in live CSS editor for editing and applying styles Ideal For - Frontend developers - CSS sprite sheet alignment - Background image positioning - Maintaining legacy UI systems - Debugging background-position issues - Faster visual CSS editing on live pages