How to change position of image within a gameobject (e.g. Button)?

[Crzonga]

I have a background image for a button, and the image has bigger dimensions than the button. I am setting the “Image type” option in the image component to be Tiled so that the aspect ratio of the image won’t be changed, however I would like to position the background image differently than the default behavior, which seems to be pivoted at the center left of the image. Any way to do so other than editing the image asset itself (which would still not do a good job since I may need to add some effects to the image when the button is hovered)?

A similar concept would be in web development, positioning an image element within a div by using css position: absolute; top: <some px>....

*Update: So have just found out about the Aspect ratio fitter, which can solve a part of this problem. However, the image would overflow if the aspect ratio is different than the parent gameobject’s aspect ratio. How can I hide the overflowed parts?

[jeromeatunity]

You could use the Button component’s image as a mask and add the bigger image as a child to that rect transform.

You can add a Mask component to any Image Component, and its Source Image will now act as a mask for all the children of that transform.

Note that I assigned the child background image as the Target Graphic of the Button Component to use the Color Tint transition.

For controlling the anchoring and resizing of an image, you can use the Rect Transform’s Anchor presets. Docs here.

hth.