What size should a takeover background be?

A takeover background is a type of advertising unit that lets you display creative either side of your desktop website's usual layout, with the entire sides becoming clickable.

It is often used as part of a campaign with other ad units on the same page running inventory for the same advertiser. This can be achieved using a Roadblock.

To use a takeover background, you'll need to create a single image that will be centered behind the page. It will be shown at full size, it won't be scaled to fit a browser/screen.

Getting the width of the central area to leave blank

The central portion of the image will be covered by the website, so ideally leave it blank, but absolutely don't place any text or logos in this area.

You will need to calculate the width of your website, to know how wide the area should be that you'll leave blank.

To do this, open it on a desktop/laptop web browser and make it fill your whole screen.

Next, open your browser's developer tools. There are multiple ways to do this. You can usually right-click and select "Inspect" or similar. Or you can try the keyboard shortcut control-shift-C on Windows or command-option-C on macOS.

Look for the <div> tag with the class "js-takeover-wrap" on it. You may need to type this into the "Search HTML" box. We've shown an example of what you're looking for with the "1" arrow above.

When you select it, your browser should highlight part of the page that is the maximum width of your website's template.

Underneath, it should tell you the size of the selected area (2). In our example above, it tells us it's 1120 x 300. The first figure is the width we're looking for. So in this example, the central area of our takeover background image that we need to leave blank is 1120 pixels. This is purely an example - it isn't necessarily the same as the width of your own website.

What width should the overall image be?

Beyond this area, it is up to you how wide the image should be. You will need to determine an acceptable "safe area" for the key information you wish to include, such as the advertiser's logo and campaign messaging.

How much of the image someone will see depends on how wide their web browser is, or how wide their screen is if they have maximised the window.

If you don't know where to begin in deciding the overall width, we recommend taking a look at your Google Analytics data to see what screen sizes most of your desktop users are using, to know which is most important to accomodate.

Takeover backgrounds won't be shown in windows or on devices which are smaller than the full width of your website. So they won't appear on phones for example, as there isn't space to display them. For this reason, a takeover background should be considered a complimentary unit to other units you may run at the same time.

What height should the overall image be?

The height of the image is entirely your decision to make. It should be as tall as you need it to be, to display all of the required creative. If it's taller than the overall height of the page it appears on, it will be cropped.

If the page is taller than the image, then the vacant space will be filled with the "background colour" you select when you set up the ad in Aiir. This goes for if the visitor's web browser is wider than the image too.

Can I see an example of a takeover background image?

The following is an example image, with guidelines added for clarity. It is only suitable for a website which is usually 980 px wide, so it may not be a suitable template for your own website.

Why is part of my takeover background image being covered up by my website?

This means you haven't calculated the width of your site correctly, so the gap in the middle of your image is not large enough.

Consult our instructions earlier in this article for how to calculate the width of your website's template.

You will then need to move your ad creative further away from the center, leaving the correct size space in the middle empty.

How can I avoid Aiir shrinking the image when I upload it?

When you upload a takeover background image, we include an extra option you can enable to prevent our system from shrinking the image.

In the "Add Files" box, select "Show upload options" (1) and then select "Optimise for large ad creative" (2)