How to add a Background Image

The background image feature offers flexible customization options. In the previous Layout Positioning example, we demonstrated a background image with blended numbered video layout positions. Now we'll show how to replace that background with a new PNG file - one that combines a PDF page with colorful background elements rendered on a canvas.

info

Images smaller than 1280x720 (widescreen mode) or 1280x960 (fullscreen mode) are centered in the background. Larger images are automatically scaled to fit the video stream dimensions, similar to CSS's object-fit: cover property.

bash

export ACCESS_KEY=123...

curl -X POST \
  -d "url=https://docs.eyeson.com/img/examples/bg_p1.png" \
  -d "z-index=-1" \
  "https://api.eyeson.team/rooms/$ACCESS_KEY/layers"

shell

SET ACCESS_KEY=123...

curl -X POST ^
  -d "url=https://docs.eyeson.com/img/examples/bg_p1.png"  ^
  -d "z-index=-1" "https://api.eyeson.team/rooms/%ACCESS_KEY%/layers"

node

const ACCESS_KEY = '123...';
const url = 'https://api.eyeson.team/rooms/' + ACCESS_KEY + '/layers';

const formData = new FormData();
formData.set('url', 'https://docs.eyeson.com/img/examples/bg_p1.png');
formData.set('z-index', '-1');

await fetch(url, { method: 'POST', body: formData });

For next pages just make the same request again with the adjusted PNG file.

Deleting the Background Image

If you don't want the background image to be shown anymore, try using these snippets.

bash

curl -X DELETE "https://api.eyeson.team/rooms/$ACCESS_KEY/layers/-1"

shell

curl -X DELETE "https://api.eyeson.team/rooms/$ACCESS_KEY/layers/-1"

node

import fetch from 'node-fetch';

const url = 'https://api.eyeson.team/rooms/' + ACCESS_KEY + '/layers/-1';
await fetch(url, { method: 'DELETE' });