How to Add a Custom Image Background for Your Full-Page Campaign

OptinMonster makes it easy to customize your Fullscreen Campaign with our drag and drop builder.

In this article, you’ll learn how to add a custom image to the background of your Fullscreen Campaign.

Configure Fullscreen Background Image

To add or change the image in your campaign’s fullscreen background, follow these steps:

  1. Navigate to the Design View of the builder for the Fullscreen Campaign you would like to edit.
  2. Click on Optin Settings in the left column of the Design View.
  3. Then, click on Fullscreen Background.

  4. Click on the current image thumbnail in the left sidebar to choose a new image.
  5. A popup window will appear to select the image you would like to add. Select an image from previous uploads, or from your computer.
  6. If you want to add or change your background’s overlay color, you can adjust the background color. Alternatively, you can remove the color overlay completely by enabling the set image layer first option.

Troubleshooting

How do I resize my image? My image is “zoomed in”, or too small for my Fullscreen Background.

You can adjust the sizing and positioning of your background image. From the Fullscreen Background menu, you can also make these adjustments:

  • Background Position: This setting allows you to position your image within the frame of your screen. The default is “Center Center” (centered from top to bottom, and centered from left to right), but you can choose a different alignment from the dropdown options.
  • Background Repeat: This setting allows you to repeat your background image if it is smaller than the total amount of background space. It also allows you to choose the direction your image repeats in. The default is “No-repeat.”
  • Background Size: This setting allows you to adjust the size or how “zoomed in” your background image is. There are 3 options available:
    • Cover: This option will resize your image to fully “cover” the size of your Fullscreen Background area. This may stretch your image, depending on its original size.
    •  Contain: This option will resize your image so that its longest dimension (width or height) will match 100% of the Fullscreen Background, fully “containing” your image. This may leave empty space, depending on your image’s dimensions. You could pair this setting with one of the “Background Repeat” options to fill that space.
    • Auto: This option will display your image at its original size. Depending on your original dimensions, this may display your image too large for your Fullscreen  (looking “zoomed in”) or too small. If the image is too small, and blurry when resized larger, try uploading a larger version of your image, or using the “Background Repeat” options to “tile” your image across your background.