UI Border with an image, but without stretching it (or how to set a main menu background)

Development Asset Creation
,
1

Hi!

I want to create a Main Menu with a background image. To do it, I’m using a border as background.

My problem is that the image get stretched and looks ugly.

Is there any way to keep its aspect ratio and not stretch it?

Maybe, there is a better way to set a background image.

Thank you!

2

border stretches its brush by design, so it is the wrong widget for a photo background. two clean solutions depending on what the image is:

for a frame/panel look (stylized art with decorative edges): use an Image widget and set Draw As to Border, then set a Margin in the brush. only the edges stretch, the middle tiles, and it scales cleanly at any resolution. border the widget has no advantage over that.

for a full photo/menu background (cover behavior like CSS): UMG has no built-in cover mode, so do the scale math yourself:

  1. Image widget, anchored center, Draw As: Image, and put the texture reference in the brush.
    1. on Construct and on any viewport resize, Get Viewport Size, get the brush image size (Get Dynamic Material or Make Brush from Texture gives you the image dimensions, or just store them).
      1. scale = max(viewportX / imageX, viewportY / imageY), apply to the Image Render Transform Scale. the image now covers the screen with the aspect ratio preserved and the overflow cropped by the canvas.
    3. if you want zero blueprint logic, the cheap alternative is a material: sample the texture with UVs derived from ScreenPosition divided by view size, do the same max-scale in the material, and put it on a full-screen Image as a material instance.
  3. whichever route, drop the border entirely. Image with Draw As: Border covers the frame case, and the render-transform approach covers the photo case.