Share via

Why is our webinar banner being cropped after upload?

Werner, Erin 0 Reputation points
2026-03-11T17:44:13.0466667+00:00

No matter what size or dimensions I create for the banner image, it is being cropped, and there is always a space on the top and bottom of the <div> the banner image is in. The settings are set to background-size: contain, rather than fitting the entire div. I don't understand why the suggested dimensions are at least 920x230px when that's not the ratio of the containing box, as seen in this screenshot. Screenshot 2026-03-11 at 12.42.43 PM

Microsoft Teams | Microsoft Teams for business | Other
Answer accepted by question author
  1. Kai-L 11,330 Reputation points Microsoft External Staff Moderator
    2026-03-11T19:44:23.44+00:00

    Dear @Werner, Erin,

    Thank you for taking the time to test this so thoroughly and for clearly describing the behavior you’re seeing.

    From my research, your observation is correct. The webinar banner area in Microsoft Teams uses a fixed container with a predefined aspect ratio, and the image is rendered as a background rather than a standard <img> element. Although the guidance recommends images that are at least 920 × 230 px, this value represents a minimum resolution for image clarity, not an exact match to the container’s visual ratio.

    Because the banner uses behavior equivalent to background-size: contain, Teams ensures the entire image remains visible without distortion. When the uploaded image’s aspect ratio does not exactly match the container’s ratio, Teams preserves the image and introduces letterboxing, which appears as empty space at the top and bottom (or sides). This is expected behavior and explains why the image may appear padded or partially cropped regardless of the dimensions you try.

    I can't stress enough the importance of your feedback in this scenario. I strongly recommend that you share your detailed experience and feedback directly with the Microsoft product team through their official feedback channels. This is the most effective way to make your voice heard and influence future feature improvements and adjustments. 

    You can visit the Microsoft Teams · Community to submit a new idea or vote on existing one. Our product team is in charge of the site, and they constantly check customer reviews and feedback. The higher votes, the more attention the related team will pay, and a lot of the features are developed and improved based on customer feedback. As a moderator, I will also pass along your feedback to the appropriate team for further consideration. While I don't directly influence product design, user feedback is actively reviewed and helps prioritize future development. If you’re unable to submit feedback yourself, please feel free to reach out to me, and I’ll be happy to submit it on your behalf. 

    Thank you for your understanding as Microsoft continues to evolve and improve the product. If you have any further questions or need additional assistance, please don’t hesitate to reach out. Have a wonderful day.

    If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".  

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread. 

    0 comments

1 additional answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Q&A Assist
    2026-03-11T17:44:28.55+00:00
    AI generated content. This question contains an answer created with AI from Q&A Assist. Learn more

    Teams webinar banners are designed to fit into a fixed aspect-ratio area on the registration page, and that area does not simply match the raw pixel dimensions of 920x230. The “at least 920x230px” guidance is about minimum resolution (so the image looks sharp), not an exact match to the container’s aspect ratio.

    Because the banner is applied as a background and scaled with behavior equivalent to background-size: contain, the entire image is kept visible without stretching. When the aspect ratio of the uploaded banner does not match the aspect ratio of the banner container, empty space (letterboxing) appears at the top and bottom or sides. That is why there is visible space above and below the image even when using the recommended minimum size.

    In practice, this means:

    • The banner image will not be forced to fill the entire <div> if doing so would distort it.
    • Any mismatch between the image’s aspect ratio and the container’s aspect ratio results in padding/empty space.
    • Using 920x230 (or larger with the same ratio) ensures clarity, but the container’s own ratio still governs whether there will be visible space.

    To minimize visible cropping or padding, create the banner as close as possible to the visual aspect ratio of the banner area shown on the registration page, then upload at or above 920x230px.

    References:

    0 comments

Your answer

Answers can be marked as 'Accepted' by the question author and 'Recommended' by moderators, which helps users know the answer solved the author's problem.