{"id":89866,"date":"2021-10-14T09:59:41","date_gmt":"2021-10-14T13:59:41","guid":{"rendered":"https:\/\/optinmonster.com\/?post_type=optinmonster_docs&#038;p=89866"},"modified":"2025-08-18T11:18:24","modified_gmt":"2025-08-18T15:18:24","slug":"how-to-add-a-custom-image-background-for-your-full-page-optin","status":"publish","type":"optinmonster_docs","link":"https:\/\/optinmonster.com\/docs\/how-to-add-a-custom-image-background-for-your-full-page-optin\/","title":{"rendered":"How to Add a Custom Image Background for Your Full-Page Campaign"},"content":{"rendered":"\n<p>OptinMonster makes it easy to customize your Fullscreen campaign with our drag and drop builder, including setting a custom background image.<\/p>\n\n\n\n<p>In this article, you\u2019ll learn how to add a custom image to the background of your Fullscreen Campaign.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Before You Start<\/h2>\n\n\n\n<p>Here are some things to know before you begin:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>This guide assumes you&#8217;ve already <a href=\"https:\/\/optinmonster.com\/docs\/how-to-create-a-full-screen-welcome-gate-optin\/\" target=\"_blank\" rel=\"noopener\" title=\"\">created a Fullscreen type campaign<\/a>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Set Background Image<\/h2>\n\n\n\n<p>To add or change the image in your campaign&#8217;s fullscreen background, follow these steps:<\/p>\n\n\n\n<p><iframe src=\"https:\/\/www.youtube.com\/embed\/nOfjHR3CoFM?rel=0\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In the&nbsp;<strong>Design<\/strong> view of the campaign builder, select the<strong>&nbsp;Settings<\/strong> icon.<br><img decoding=\"async\" width=\"800\" height=\"477\" class=\"alignnone size-large wp-image-170560\" src=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/10\/click-settings-gear-icon.png\" alt=\"click settings gear icon\"><\/li>\n\n\n\n<li>Next, within the <strong>Advanced<\/strong> tab in the sidebar expand the <strong>Fullscreen Settings<\/strong> option and select the <strong>Background Image<\/strong> setting to upload or select an existing image from your library.<br><img decoding=\"async\" width=\"800\" height=\"477\" class=\"alignnone size-large wp-image-170560\" src=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/10\/advanced-settings-fullscreen-background-image-OptinMonster.png\" alt=\"advanced settings fullscreen background image\"><\/li>\n\n\n\n<li>Once you&#8217;ve set a background image additional options to control how it appears will be available.<br><img decoding=\"async\" width=\"800\" height=\"477\" class=\"alignnone size-large wp-image-170560\" src=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/10\/fullscreen-background-image-settings-OptinMonster.png\" alt=\"fullscreen background image settings\"><\/li>\n\n\n\n<li>When you&#8217;re finished, click&nbsp;<strong>Save<\/strong>.<\/li>\n<\/ol>\n\n\n\n\n\n<h2 class=\"wp-block-heading\">Troubleshooting<\/h2>\n\n\n\n<h5 class=\"wp-block-heading\">How do I resize my image? My image is &#8220;zoomed in&#8221;, or too small for my Fullscreen Background.<\/h5>\n\n\n\n<p>Use the additional background image options that appear once you&#8217;ve set the image to control the sizing.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"701\" src=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/10\/fullscreen-background-image-settings-OptinMonster-1024x701.png\" alt=\"fullscreen background image settings\" class=\"wp-image-202736\" srcset=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/10\/fullscreen-background-image-settings-OptinMonster-1024x701.png 1024w, https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/10\/fullscreen-background-image-settings-OptinMonster-300x205.png 300w, https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/10\/fullscreen-background-image-settings-OptinMonster-768x526.png 768w, https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/10\/fullscreen-background-image-settings-OptinMonster-1536x1052.png 1536w, https:\/\/optinmonster.com\/wp-content\/uploads\/2021\/10\/fullscreen-background-image-settings-OptinMonster-2048x1403.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Background Position:<\/strong> This setting allows you to position your image within the frame of your screen.<\/li>\n\n\n\n<li><strong>Background Repeat:<\/strong> 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 (if set to repeat).<\/li>\n\n\n\n<li><strong>Background Size:<\/strong> This setting allows you to adjust the size or how &#8220;zoomed in&#8221; your background image is. There are 3 options available:\n<ul class=\"wp-block-list\">\n<li>Cover: This option will resize your image to fully &#8220;cover&#8221; the size of your Fullscreen Background area. This may stretch your image, depending on its original size.<\/li>\n\n\n\n<li>&nbsp;Contain: This option will resize your image so that its longest dimension (width or height) will match 100% of the Fullscreen Background, fully &#8220;containing&#8221; your image. This may leave empty space, depending on your image&#8217;s dimensions. You can pair this setting with one of the Background Repeat options to fill that space.<\/li>\n\n\n\n<li>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&nbsp; (looking &#8220;zoomed in&#8221;) 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 &#8220;Background Repeat&#8221; options to &#8220;tile&#8221; your image across your background.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>OptinMonster makes it easy to customize your Fullscreen campaign with our drag and drop builder, including setting a custom background image. In this article, you\u2019ll learn how to add a custom image to the background of your Fullscreen Campaign. Before You Start Here are some things to know before you begin: Set Background Image To&nbsp;&hellip;<\/p>\n","protected":false},"author":4657,"comment_status":"open","ping_status":"closed","template":"","documentation\/categories":[11],"documentation\/tags":[31399,31409,31411,31401],"class_list":["post-89866","optinmonster_docs","type-optinmonster_docs","status-publish","hentry","categories-functionality"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/89866","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/types\/optinmonster_docs"}],"author":[{"embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/users\/4657"}],"replies":[{"embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/comments?post=89866"}],"version-history":[{"count":13,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/89866\/revisions"}],"predecessor-version":[{"id":202738,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/89866\/revisions\/202738"}],"wp:attachment":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/media?parent=89866"}],"wp:term":[{"taxonomy":"categories","embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/categories?post=89866"},{"taxonomy":"internal_tags","embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/tags?post=89866"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}