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).


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:


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.

Powered by Zendesk