# How to replace and position background images Canonical URL: https://support.optimonk.com/en/articles/how-to-replace-crop-and-position-background-images A background image is usually the loudest thing in a popup, and it is the one part you will most often want to swap for your own. In the editor you can replace it with your own file, pick one from your image library, and control how it fills the space. In this article: - how to replace a background image, - what the four **Position** options mean, - how to show only the part of a picture you want. --- ## Open the popup in the editor 1. Open **Campaigns** in the left menu and click the campaign you want to edit. 2. In the **Variants** table, click the variant you want to change. The variant opens in a preview overlay. 3. In the overlay's footer, click **Drag & drop editor**. Straight after a build you can also get there from the design conversation: the finished popup's toolbar has an **Edit in editor** button. --- ## Replace the background image 1. Click the picture on the canvas. The panel on the right switches to the **Visual** tab and shows that element's properties. If you clicked a card or a container whose *backdrop* is the picture, the element is named **Background (stage)** or the panel tells you where the picture actually lives: *This picture sits on {element}. Replacing it here changes it there.* 2. Find the **Background image** block. It shows a thumbnail of the current picture and, under it, **Replace background image**. 3. Now pick one of the two ways in: - **Paste a URL.** Type or paste the address into the field (it is prefilled with the current one) and click **Replace**. - **Browse images.** Click **Browse images** to open your image library. 4. In the library you can pick from three groups: - **In this design** — the pictures already used by this popup. - **Your uploads** — everything you have uploaded before. *Everything you upload here stays available for your next campaign.* - **From your campaigns** — pictures from your earlier campaigns. Use **Search by filename** if the list is long, then hover a picture and click **Use**. **Remove from library** deletes an upload you no longer need. 5. To bring in a new file, click **Upload from your device** inside the same modal, or just drag the files onto it — *Drop the images here*. Allowed: **PNG, JPG or WebP · max 20 MB**. A file that breaks a rule says so: *"name" is 24.1 MB. The limit is 20 MB. Pick a smaller image, or compress it under 20 MB.* 6. Click **Save** in the editor's header when you are done. On a published campaign the save also refreshes the live creative. --- ## What do the Position options mean? Under the picture you get four controls. **Position** decides how the image fills the box: - **Original** — the image is placed at its own size, unresized, from the top-left corner. - **Contain** — the image is scaled to fit inside the box without distortion. The whole picture stays visible; empty space may remain around it. - **Cover** — the image fills the whole box without distortion. Whatever doesn't fit is cut off at the edges. - **Stretch** — the image is pulled to fill the box exactly, ignoring its original aspect ratio. It can look squashed. Under it: - **Align X** and **Align Y** — two percentages that say which part of the picture sits in the middle of the box. They appear for every position except **Stretch** (a stretched image fills everything, so there is nothing to align). - **Repeat** — **No repeat**, **Repeat**, **Repeat horizontally** or **Repeat vertically**. Useful for a pattern; leave it on **No repeat** for a photo. --- ## "I only want a part of the picture" — how to crop There is no crop tool in the editor: you cannot drag a frame over the picture on the canvas. Three ways to get the same result: 1. **Cover + Align X / Align Y.** This is the closest thing to cropping and it takes seconds. Set **Position** to **Cover**, then move **Align X** and **Align Y** until the part you care about — a face, a product, a logo — is the part that stays visible. Nothing is distorted; only the framing changes. 2. **Ask the AI tab.** Switch the right panel from **Visual** to **AI** and describe what you want done to the picture. The editor can **remove** something from it, **retouch** it, **recolor** it or **replace** a detail inside it. It tells you what it found and waits for your confirmation before it runs, and you can **Revert** the result if you don't like it. 3. **Crop it outside and upload it.** Cut the picture to the shape you want in any image editor, then bring it in with **Browse images → Upload from your device**. This is the surest route when you need an exact crop. 💡 On the AI tab, the assistant edits pictures that are *already in the design*. If it can't make the image you asked for, it says so and opens the **Visual** tab with the picture selected, so you can swap it with **Replace image** instead. --- ## Multi-page popups If your popup has several pages, the page switcher sits at the bottom of the canvas: **Main page**, **Page 2**, **Page 3**… (or **Main page** / **SMS** / **Thank you** on a funnel). Each page has its own background, so repeat the steps above on every page you want to change — and check each one, because a picture that frames nicely on a tall first page can be cut badly on a short thank-you page. One limit worth knowing: *AI editing is currently available on the main page only.* On the other pages use the **Visual** tab. --- ## Desktop and mobile The desktop and the mobile version are two separate documents — switch between them with the viewport control in the header. Changing the background on one does not automatically change it on the other, and when the two drift apart the editor marks it with a **{viewport} view differs** badge. Check both before you save.