Background image cropping

Background image cropping allows you to edit background images of popups intuitively in Editor. In OptiMonk, the size of your popup is determined by its contents a.k.a. it grows tall or shrinks based on the size of the content included. This is why background image cropping makes it very easy to adjust the size of your popup. Simply, crop the image to the right size and your popup will adjust in size.

In this article, we’ll show you step by step

How to crop background images of your popups

  1. Log in to your OptiMonk account at https://app.optimonk.com/
  2. Select Campaigns on the navbar.crop-campaigns.png

3. Then, select the Campaign you wish to edit or create a new one:
crop-select-campaign.png

4. Click on the Variant you want to edit. This will take you to the Campaign editor. In this example, we’ll pick a Photographic template that has a background image by default. If you click on the image, you’ll see background setting options on the left where you can change the image. 
crop-4b.png

5. To change the image, click on the small preview of the image here and select Replace image.
crop-replace.png

6. This will take you to the image library where you can select the right image from any of your previously uploaded images .
crop-image_library.png
7. Once you’ve selected the right image, make sure to set the position of the image to Crop.
crop-position.png

8. Now you can access background image copping by double clicking on it on your popup.
crop-page2.png

9. Use your touchpad to set the image to the right size and drag your image to the position where you’d like to crop it. 
crop-background-image-demo.gif

10. Different pages of your popup might have different sizes, meaning that you’ll have to adjust the size of your image on each page. Repeat the process for each page of your popup.
crop-page2.png

What do different image positions mean?

When replacing the background image of a popup or column, you can choose from 5 different image positions. Let’s look at what these mean.

crop-position.png

Original - The image is positioned to the top left corner keeping its original size.

Contain - Force the image to resize to the size of the popup without stretching.

Cover - Make sure the image covers the entire column even if it means stretching it a bit of cutting small parts off.

Stretch - Resize the image to fit the column without maintaining its original aspect ratio.

Crop - Scale and crop background images while maintaining their original aspect ratios.

If you have any further questions or need any help, just let us know at support@optimonk.com and we would be happy to assist you :)

Have more questions? Submit a request

Comments