Debug The White Rectangle Before Rewriting Your Image Component

A dark card exposes a white box around an otherwise normal image. Before adding CSS overrides, determine whether the box belongs to the asset or its container.

Build A Two-Color Reproduction

Render the same file against white and charcoal. Remove filters and blend modes. Open the image directly as well. If the rectangle follows the file, inspect the exported pixels before changing the component.

.asset-check { background: #263445; } .asset-check img { width: 240px; height: auto; } 

Fix The Asset Boundary

The remove white background guide covers preparing a separate image. Preserve intentionally white lettering and enclosed details while clearing the unwanted area.

According to the W3C PNG specification, PNG can carry alpha information. The extension alone does not prove that any pixels are transparent. Renaming a JPEG also leaves its image data unchanged.

Make The Review Reproducible

• Record the exact file and rendered width.
• Check both themes and the exported result.
• Inspect any CDN conversion if production differs.

Opacity affects the entire image, so it cannot selectively remove the white area. Once the file is correct, handle spacing and object-fit as separate layout concerns.

Keep this small reproduction alongside the fix so a future asset replacement can be checked under the same conditions.

Do not hide the issue by matching the card background to the rectangle. That makes the defect harder to notice until someone changes the theme.