Background HTML5 is a banner that allows you to replace the site background with an HTML creative or image.
Using the Banner Background HTML5 template, you can add a background to a site in two ways:
- Only prepare the background image and the clicklink. It's important that the size of the background image doesn't exceed the allowable size limit in the account.
You can use the following banner features in Adfox:
- Show the background image on the edges of the site, and with the shift of the site content.
- Add several buttons leading to different pages of the advertiser's site (only for HTML creatives).
- Flexibly configure additional elements on the site that overlap the background image.
- Set the position of the background image when scrolling through the site content.
- You can specify the banner width and height both in pixels and as a percentage (100%).
- The HTML creative code can be adaptive. For that, you need to specify the banner size as a percentage.
- The availability of the click URL in the banner parameters determines the clickability of the banner with the image.
- Viewability check for the HTML5 Background format is only performed if at least 1 px of the banner is in the active browser window for at least 2 seconds.
- We don't recommend using this format on mobile devices, because a part with the background image often remains outside the mobile device screen.
Prepare a background image that should be equal in width to the width of the site + the width of the background side edges.
The size of the background image shouldn't exceed the allowed size limit in the account (300 KB by default).
The background image can be both an independent banner (in that case, you don't need to prepare the HTML creative) or a placeholder that will appear if the user's browser doesn't support the HTML5 code of the creative.
HTML creative requirements (for code developers)
Prepare your project with an HTML creative complying with the following requirements:
- The maximum allowed number of characters in the HTML code is 65,000.
- Save the JS and CSS code in separate files with the .js or .css extension.
- File weight can't be more than 300 KB.
Upload the files to the Files tab of the ad campaign and embed the resulting links to the files in the HTML code.
- If absolute links (
src="css/style.css") are included in the project, then when the project is uploaded, Adfox recognizes the file paths, automatically uploads them to the Files tab, and replaces all links to these files in the uploaded project.
If relative links (for example,
src="../js/script.js") are included in the project, use one of the following methods:
- Replace the links to the
.cssfiles with absolute links: Adfox parsing will work and all of the links will be replaced automatically.
- Manually upload the
.cssfiles to the Files tab. Then get links to these files in Adfox and replace the relative links with them in the HTML code.
Example of connecting JS and CSS files:
- The project can contain only one file with the .html extension.
- The maximum allowed number of files in a project is 50.
- File types allowed in the project: CSS, JS, HTML, GIF, PNG, JPG, JPEG, SVG, JSON, FLV, MP4, OGV, OGG, WEBM, AVI, and SWF.
- The maximum size of each file (this applies to archived files as well):
- 300 KB.
- 1 MB for video files.
- File names must only contain numbers or Latin letters and an underscore character. You can't use spaces, quotation marks, and special characters in the file name.
- The completed project is a ZIP archive.
To place the creative in the center, you need to set the central location in the editor settings. For example, in Adobe Animate CC, go to:
The part of the background that will be located under the site content must have the same width as the site content and it must be made transparent. To do that, set
Add a banner to Adfox
To add a banner to Adfox, select the banner type you need and the Background HTML5 [context] template.
Set the banner settings: