Background HTML5


The template works in insertion codes which uses loader.js library only. That insertion codes marked “NEW” in the instruction.

Background HTML5 - is the banner for replacing site’s background on HTML-creative or image.

The feature: the template's visibility check counts only in case of at least 1px is in acitve browser window for 2 or more seconds.

You could add banner with this template in two different ways:
1. prepare only background image and URL referrer. It’s important that image size in kilobytes isn’t more than limited value in account.
2. If you have HTML-creative in editor. For productive work in editors you could use the according instructions: Adobe Animate CC and Google Web Designer.

- Show image in site’s edges and also with content’s shift.
- Adding several buttons with transfers on different advertiser's pages.
- Flexible tuning of additional elements that overlay background image.
- Layout settings of background image during content scrolling.

The template isn’t recommended for mobile devices because of background part of the site is frequently lays beyond mobile viewport.

Images requirements

Prepare background image which width equals site’s width plus border fields width. Image size in kilobytes couldn’t be more than limited value in account (300kb as default).

Background image could be stand-alone banner (so you haven’t to prepare HTML-creative) or it could be a stub for the case of user’s browser doesn’t support HTML5 code.

HTML5 Creative’s requirements (for developers)

Prepare your project with HTML creative according following requirements:

1. Maximum number of symbols – 65000;
2. JavaScript and CSS are preferable to locate in HTML code of the banner.
If HTML code reaches the symbols limit, you have to reduce the code through taking JS and CSS out of HTML and putting it into standalone files:
- Save JS and CSS in standalone files with extensions js and css;
3. There could be only the one html file in the project;
4. Maximum number of project files — 50;
5. The following file formats are supported: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf;
6. 6. Maximum size for each file (including files inside archives):
- 300Кb;
- 1Мb for video files.
7. Filenames should contain only digits, letters of English alphabet and underscores. Using of Russian letters, spaces, quotes and special characters is restricted;
8. Using of Russian letters is restricted in name of the variables and objects. There is only one exception: the banner text.
9. Format of ready project is the — zip archive.

We recommend to use 2 images while developing creative: one image for the left side, another for the right side.
Background’s part that will be under site’s content have to be the same width as a content. It also have to be transparent – set background-color=alpha 0 to do that.

Adding banner in ADFOX

Use template “Background HTML5 [loader]” to add banner in ADFOX. .

Specify the settings for banner:

  1. Ссылка на промерочный пиксель (Tracking pixel link) — ADFOX pixel uses by default // If you need to keep track in other system you have to delete ADFOX pixel and specify another link.

  2. URL перехода (URL referrer) — specify the link to advertiser’s site. It’s necessarily to check if there is a protocol mention in the link (http:// or https://) for correct work.

  3. Архив с HTML5 креативом (HTML5-creative archive) — upload *.zip-archive with your project, “HTML5 creative’s code” field have to be empty.

  4. HTML5 код креатива (HTML5 creative’s code) — leave the field empty.

  5. Ширина баннера (px или 100%) (Banner width (px | 100%)) — specify the banner width which includes site’s content width and side images width.

  6. Высота баннера (px или 100%) (Banner height (px | 100%)) — specify banner height.

  7. Общий цвет фона (rgb в hex, например fff) (General background color (3-sign RGB, for example: #fff)) — specify background color for the page.

  8. Селектор дополнительных кликабельных элементов (например, #content) (Selector for additional clickable elements (for example #content)) — specify the selectors for transparent elements in content’s area. The clicks on them will execute the transfer to advertiser’s site. Use the comma to separate the selectors.
    Selectors’ description have to correspond CSS syntax. Example:
    #content – one selector with ID “content”;
    #content,.clickable-block – two selectors with separator.

  9. Селектор контейнера баннера (Например, .ya-ad-container) (Selector for banner container (for example, .ya-ad-container)) — container for the background block. If it’s not specified tag BODY would be a container. Selectors’ description have to correspond CSS syntax.

  10. Сдвиг левой стороны баннера (px или %) (Left edge shift (px or %)) — banner’s left edge shift. Positive values shift background to the left, negative values – to the right.

  11. Сдвиг верхней стороны баннера (px или %) (Upper edge shift (px or %)) — banner’s upper edge shift. Default value: 0 px;

  12. Позиция фона (absolute или fixed) (Background position (fixed or absolute)) — specify the position property for the background:
    absolute - banner will be positioned absolutely relative to the container. It will be scrolling during page scroll;
    fixed - banner will be positioned fixed relative to the container. Its position will be fixed during page scroll.

  13. Селектор контейнера для сдвига контента (Например, .header) (Selector for content shift (for example, .header)) — specify the selector to add transparent block shifting the content. If it’s not specified the transparent block would be added as a second element into BODY (after the AD block).
    Selectors’ description have to correspond CSS syntax.
    This parameter requires positive value in “Shifting pixels number (px)”

  14. Количество пикселей сдвига контента (px) (Shifting pixels number (px)) — specify on how much pixels you need to shift the content. The value have to be positive.

  15. z-index баннера (Banner’s z-index) — z-index property of the banner. Default is not specified.

  16. target для ссылки к фоновому изображению (target for background image link) — specify the window for background image opening:
    _top - current window;
    _blank - new window/tab (depends on browser’s settings).

  17. imageRendering cssimage-rendering property indicates which algorithm to use when scaling images. This value will apply only if it is fully compatible with the browser, otherwise default value will be used or the property will not take effect. By default: -moz-crisp-edges in Firefox, pixelated in Chrome,crisp-edges for other browsers. Syntax: auto[/ tag_text] - The image will be be scaled with an algorithm that smoothes the the image. crisp-edges - The image will be be scaled with an algorithm that preserves contrast and edges in the image, and which does not smooth colors or introduce blur to the image in the process. Firefox supports the -moz-crisp-edges value. Chrome instead of crisp-edges supports -webkit-optimize-contrast. Opera supports -o-crisp-edges value. pixelated - When scaling the image up, the nearest-neighbor algorithm will be used, so that the image appears to be composed of large pixels. When scaling down, this is the same as auto. Compatible only with Chrome.

  18. containerBackgroundColor — specify the background color of the custom container (if the value for the "Banner container selector" is set), which will be used to render creative instead of . Format: rgb to hex, for example fff.

  19. backgroundPosition — CSS property background-position for a container with a banner-picture. The default is '50% 0’.

  20. Изображение фона (Background image) — upload a background image. It could be stand-alone banner if there’s no HTML5 creative.

  21. Дополнительные стили для тега body (Additional styles for BODY tag) — css styles for BODY tag. The styles apply exactly for the BODY tag no matter what element is the main for th background.