⚡ Quick Fix (TL;DR)

The Culprit: A background image's default positioning may crop out the subject depending on the container's actual proportions.

The Fix: Center the background image within its container as a starting point.

.my-hero {
  background-position: center;
}