Fill Generative Position fill-gen-pos

Specifies where generative fill is placed in the image when fit=fill&fill=gen is used.

You can position the generative fill horizontally and vertically. Valid horizontal values are middle, left, and right. Valid vertical values are center, top, and bottom.

Multiple values can be separated by a comma (,). If no value is explicitly set, the default value is middle,center. Parameter priority is set from right to left, meaning the last parameter value takes precedence over the previous parameters.

Horizontal Positioning

The middle, left, and right values allow you to specify the starting position of the original image and where generative fill will be added. For example, fill-gen-pos=left will place the original image fill to the left and add the generative fill to the right of the image.

Original image: https://assetmanager.imgix.net/picography-mountain-waterfall-bridge-768x960.jpg

Same image using fill-gen-pos=left: https://assets.imgix.net/combined-gen-fill.jpg?auto=format&mark64=aHR0cDovL2Fzc2V0cy5pbWdpeC5uZXQvdGV4dC1iYWNrZ3JvdW5kLnBuZz9tYXNrPWNvcm5lcnMmY29ybmVyLXJhZGl1cz0wLDAsMCw3JnR4dDY0PVAyZGxibVZ5WVhScGRtVXRjRzl6YVhScGIyNDliR1ZtZEE9PSZ0eHQtY29sb3I9RkZGRkZGJnR4dC1maXQ9bWF4JnR4dC1hbGlnbj1jZW50ZXIsbWlkZGxlJnR4dC1zaXplPTM2JnR4dC1mb250PU1lbmw=&mark-scale=20&mark-pad=-1&mark-align=top%2Cright&fm=png&ixlib=react-9.7.0&w=1100&h=750&dpr=2&q=50

Vertical Positioning

The center, top, and bottom values allow you to specify the starting position of the original image and where the generative fill will be added. For example, fill=gen-pos=bottom will add the image fill to the top and center of the image. Below is an example of an image using fill=gen-pos=bottom.

Original image: https://assetmanager.imgix.net/testing-gen-fill-bottom.jpeg?ar=15:7&w=1200

Same image using fill-gen-pos=bottom: https://assetmanager.imgix.net/testing-gen-fill-bottom.jpeg?fit=fill&fill=generative&ar=15:7&fill-gen-pos=bottom&w=1200