This guide is a walk-through for several methods of adding a hero or background image using Anima.
​

For images with a central focal point, using a pin to Center Horizontally is a quick and simple way to avoid scaling issues.

Please refer to the CenteredBackground template for this guide.

Step 1: Ensure that your image width is greater than or equal to the screen sizes you wish to support. Consider that the focal point should be able to be seen on a smaller screen if needed.

Step 2: Insert the image and use Auto-Layout to set a pin for Center Horizontally. Without the pin, the artboard would stretch to include the entire image instead.

Check out an example in this preview.

If you want the background to cover your entire page, a shape fill may be the best option.

Please refer to the ShapeFill template for this guide.

Step 1: We'll want to add a shape that will contain the background image that we want to use. In this example, we'll use a rectangle located below a header. I added responsive pins for each direction using Auto-Layout so that the rectangle will expand for different screen sizes.

Step 2: Select the rectangle and look for the 'Fill' setting in the inspector panel. Find 'Pattern Fill' to use a custom image. Depending on the size of your background, you'll want to select the appropriate fill pattern. In this example, our rectangle matches the height of our image and I'm able to use the first option to 'Fill' with the pattern.

Using this method will ensure that the image doesn't stretch when the shape responds to new screen sizes.

Check out our example in this preview.
​

We’re super excited to have you trying it out and hearing your feedback.