SAP Knowledge Base Article - Public

3149236 - Banner Image Latest Home Page

Symptom

Uploading a custom Banner Image to the Latest Homepage, results in cropped image even though the recommend file size and aspect ratio were met.

Environment

SAP SuccessFactors HXM Suite

Reproducing the Issue

Prerequisites:

  • The Latest Homepage upgrade 
  • Administrator Permissions > Manage System Properties > Manage the Latest Home Page permission

Refer to Help Guide

  1. Go to Admin Center Manage Home Page Banner Image.
  2. Choose on of the following options for the banner image.
  3. Select Use default banner image to use the default image we provide.
  4. Deselect Use default banner image and choose Upload to provide your own banner image.
  5. Follow on screen instructions for file size and aspect ratio
  6. Click OK and Save

Refer to Help Guide

In some cases, the image you have uploaded as the banner will be cropped, where not the full image will be displayed

Cause

Expected behavior:

The way the image works is the entire image itself does not get fit into the rectangular container. The image is stretched 100% of the width and vertically centered. This is done in order to accommodate for different screen sizes. If not, then the image could be distorted on various screen sizes depending on the image that is uploaded. So the way that it is currently implemented is more flexible and the outcome is generally a more versatile and clearer image.

 

Resolution

"Image/data in this KBA is from SAP internal systems, sample data, or demo systems. Any resemblance to real data is purely coincidental."

  1. Guidance to choose an image is as follows:
    1. Choose a source image with 16x9 aspect ratio; other aspect ratios can be used but be sure to try it out to see how the scale/cropping is affecting the display
    2. Do not have important visual elements in the top/bottom portions of the image as these parts can be cropped away depending on the size of the user's window
  2. The visible portion of the cropped image will not always have the same aspect ratio
    1. The proportions within the image are maintained, though the image is evenly scaled up/down so that the width of the image is equal to 100% of the width of the user's screen.
    2. The image is then cropped vertically so that equal portions of the top/bottom of the image are removed such that the image will be 220px tall on normal screens, or 175px for smaller mobile-sized screens (414px or smaller) -> H2 2023 onwards the image will always be 220px on all screen sizes. 
    3. The proportion of image that is not visible because of the cropping effect will be larger for users with very wide screens, because the image scales up evenly to meet 100% of the available width but the height of the banner remains fixed.

See Also

How to Enable the Latest Homepage 

How to Configure the Banner on the Latest Homepage

Keywords

Banner Homepage Latest Homepage Upload Banner Banner Image , KBA , LOD-SF-PLT-LHOM , Latest Home Page , Problem

Product

SAP SuccessFactors HXM Core 2111