How can I adjust a banner image to fit all device screens?

Topic summary

A user is experiencing issues with a banner image appearing too large when viewed fullscreen on desktop. The banner is currently set to “adapt to image size,” which works well on mobile and minimized views but creates excessive height on larger screens.

Proposed Solution:

  • Another participant suggested adding background-cover property to the image in the code to make it responsive across different screen sizes.

Current Status:

  • The original poster attempted to implement the CSS fix but reported it did not resolve the issue.
  • The discussion remains open with the problem unresolved, likely requiring further troubleshooting of the CSS implementation or alternative approaches to responsive banner sizing.
Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.

Hello, how can I make this banner image section fit on all screen sizes? It is a little too big when viewed fullscreen.

It is set to adapt to the image size. This is the result when viewed fullscreen on desktop:

Minimized and on mobile it is more like this, which is perfect:

Thanks for the help!

It can be fixed in code by adding background: cover property to the image.

Like this? If so, did not work. Thanks!