Add a background image to an iframe campaign using CSS

Tabata Vossen -

Is there an easy way to have a background image instead of a colour in an iframe campaign? Yes, with the use of CSS. This guide will enable you to add a background image to any iframe campaign in your account.

Upload your background image to the Qualifio Multimedia Library.

Note: You can upload any image (recommended max: 5 Mo) with a minimum size of 1000 pixels wide (landscape) or 810 pixels wide (portrait, assuming that 810 pixels is the width of your iframe).

Screenshot_2020-01-30_at_11.39.28.png

Once you have uploaded the background image you want, double click on it, or right-click and click Select in the menu. Get the image URL:

Screenshot_2020-01-30_at_11.42.35.png

With the CSS tab (in your campaign, look & feel step, advanced settings section), you have a bit more customisation at your disposal. So, you can use this method to add the background image to your campaign:

body {
background-image: url('your image URL');
}

Then, paste the URL of your background image in the above CSS rule.

body {
background-image: url('/library/product_team_0/images/2020/example.png');
}

Click Apply CSS. If you preview your campaign, you should now see that the background is the image you uploaded!

Once you're happy with how it looks, click Exit & Save in the bottom right corner of the editor.

Note: By default, the background image is placed at the top left corner of its container (in this case: your campaign's iframe), and repeated both vertically and horizontally if the background image is smaller than its container.