understanding your issue - Manifest Infotech Solutions
Problem Analysis

Your current issue stems from a fundamental misunderstanding of CSS positioning:

1. position: fixed positions elements relative to the viewport (browser window), not your background image

2. background-size: cover scales your background image dynamically based on viewport size

3. Your elements are positioned with fixed pixel values, but the background scales proportionally

Best Practices from Manifest Infotech

1. User Experience: The elements remain clickable and interactive at all screen sizes

2. Performance: Use optimized images (WebP format recommended)

3. Accessibility: Add proper alt text and ARIA labels

4. Cross-Browser Compatibility: Tested across Chrome, Firefox, Safari, and Edge

Implementation Tips

1. Calculate your background image's aspect ratio: width ÷ height

2. Position elements using percentages based on their position in the original design

3. Test on multiple devices and screen sizes

4. Consider adding minimum/maximum sizes for very small/large screens

This solution, developed following Manifest Infotech's web development standards, ensures your interactive elements remain perfectly positioned relative to your background image across all screen sizes and devices.