Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.videobgremover.com/llms.txt

Use this file to discover all available pages before exploring further.

​
Background Types

Choose the type of background that fits your creative vision:

🎨 Color

Solid colors using hex codes

🖼️ Image

Static images (automatically looped)

🎬 Video

Dynamic videos as moving backgrounds

​
Color Backgrounds

Perfect for clean, professional looks or chroma key workflows. 
import { Background } from '@videobgremover/sdk'

// Solid color backgrounds
const red = Background.fromColor('#FF0000', 1920, 1080, 30)
const green = Background.fromColor('#00FF00', 1920, 1080, 30) // Chroma key
const blue = Background.fromColor('#0000FF', 1920, 1080, 30)
const white = Background.fromColor('#FFFFFF', 1920, 1080, 30)
const black = Background.fromColor('#000000', 1920, 1080, 30)

// Custom colors
const purple = Background.fromColor('#7C3AED', 1920, 1080, 30)
const orange = Background.fromColor('#FF6B35', 1920, 1080, 30)
ColorHex CodeUse Case
🔴 Red#FF0000Bold, attention-grabbing
🟢 Green#00FF00Chroma key standard
🔵 Blue#0000FFProfessional, clean
⚪ White#FFFFFFClean, minimal
⚫ Black#000000Dramatic, cinematic

​
Image Backgrounds

Use static images that automatically loop to match your video duration. 
import { Background } from '@videobgremover/sdk'

// Image backgrounds (dimensions auto-detected)
const cityscape = Background.fromImage('cityscape.jpg', 30)
const nature = Background.fromImage('forest.png', 24)

// From URLs
const webImage = Background.fromImage('https://example.com/bg.jpg', 30)

// Different frame rates
const cinema = Background.fromImage('background.jpg', 24)   // Cinematic
const smooth = Background.fromImage('background.jpg', 60)   // Smooth

​
Image Requirements

  • Formats: JPG, PNG, WebP, TIFF
  • Resolution: Any resolution (will be scaled to match composition)
  • Aspect ratio: Any aspect ratio (consider your final video dimensions)

​
Video Backgrounds

Use dynamic video backgrounds for more engaging compositions. 
import { Background } from '@videobgremover/sdk'

// Video backgrounds (dimensions and FPS auto-detected)
const nature = Background.fromVideo('nature_scene.mp4')
const abstract = Background.fromVideo('abstract_motion.mov')

// From URLs
const streaming = Background.fromVideo('https://example.com/bg_video.mp4')

// With audio control
const silent = Background.fromVideo('music_video.mp4').audio(false)
const quiet = Background.fromVideo('ambient.mp4').audio(true, 0.3) // 30% volume

​
Video Background Features

  • Duration control: Video backgrounds determine the final composition length
  • Audio support: Include or exclude background audio
  • Trimming: Use only part of the background video
  • Auto-detection: Dimensions and frame rate detected automatically

​
Trimming Video Backgrounds

Use only part of a video as background: 
// Use seconds 10-30 of background video
const trimmed = Background.fromVideo('long_video.mp4').subclip(10, 30)

// Use from 5 seconds to end
const fromMiddle = Background.fromVideo('video.mp4').subclip(5)

​
Background Audio

Control audio from video backgrounds: 
// Enable background audio (default for video backgrounds)
const withAudio = Background.fromVideo('music.mp4').audio(true, 1.0)

// Disable background audio
const silent = Background.fromVideo('music.mp4').audio(false)

// Reduce background audio volume
const quiet = Background.fromVideo('music.mp4').audio(true, 0.2) // 20% volume

​
Duration Rules

Understanding how background types affect composition duration:

​
Rule 1: Video Backgrounds Control Duration

When you use a video background, the final composition duration matches the background video: 
// 30-second background video = 30-second final composition
const bg = Background.fromVideo('30_second_video.mp4')
const comp = new Composition(bg)
comp.add(shortForeground) // Even if foreground is 5 seconds

// Final video will be 30 seconds (background duration)

​
Rule 2: Color/Image Backgrounds Use Foreground Duration

Color and image backgrounds adapt to your foreground duration: 
// Color background adapts to foreground
const bg = Background.fromColor('#FF0000', 1920, 1080, 30)
const comp = new Composition(bg)
comp.add(tenSecondForeground) // 10-second foreground

// Final video will be 10 seconds (foreground duration)

​
Rule 3: Explicit Duration Override

You can always override with explicit duration: 
const comp = new Composition(anyBackground)
comp.setDuration(15.0) // Force 15-second duration
comp.add(foreground)

// Final video will be exactly 15 seconds

​
Examples

​
Professional Interview Setup

// Clean corporate background
const bg = Background.fromColor('#1E293B', 1920, 1080, 30) // Dark blue
const comp = new Composition(bg)

comp.add(interviewSubject, 'person')
  .at(Anchor.CENTER_RIGHT, -100)
  .size(SizeMode.CANVAS_PERCENT, { percent: 60 })

comp.add(companyLogo, 'logo')
  .at(Anchor.BOTTOM_LEFT, 50, -50)
  .size(SizeMode.CANVAS_PERCENT, { percent: 15 })
  .opacity(0.8)

​
Creative Video-on-Video

// Dynamic video background
const bg = Background.fromVideo('city_timelapse.mp4')
const comp = new Composition(bg)

comp.add(dancer, 'performer')
  .at(Anchor.CENTER)
  .size(SizeMode.CONTAIN)
  .opacity(0.9)

// Background video controls duration automatically

​
Next Steps

📐 Position Your Videos

Learn precise positioning and sizing techniques

⏰ Control Timing

Create timed sequences and animations