> ## 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.

# Positioning & Sizing | Remove Video Background Positioning

> Master video layer positioning with 9 anchor points, pixel-perfect offsets, and multiple sizing modes. Create professional multi-layer compositions.

## Positioning System

Position your video layers using anchors and offsets for pixel-perfect control:

<CardGroup cols={3}>
  <Card title="⚓ Anchors" icon="anchor">
    **9 anchor points** for easy positioning
  </Card>

  <Card title="📏 Offsets" icon="ruler">
    **Pixel offsets** for fine-tuning position
  </Card>

  <Card title="📐 Size Modes" icon="expand">
    **Multiple sizing options** for different needs
  </Card>
</CardGroup>

## Anchor Points

Use anchor points to position layers relative to the canvas:

|   TOP\_LEFT  |   TOP\_CENTER  |   TOP\_RIGHT  |
| :----------: | :------------: | :-----------: |
| CENTER\_LEFT |     CENTER     | CENTER\_RIGHT |
| BOTTOM\_LEFT | BOTTOM\_CENTER | BOTTOM\_RIGHT |

<CodeGroup>
  ```typescript Node.js theme={"dark"}
  import { Anchor } from '@videobgremover/sdk'

  // Basic positioning
  comp.add(transparent).at(Anchor.CENTER)
  comp.add(transparent).at(Anchor.TOP_LEFT)
  comp.add(transparent).at(Anchor.BOTTOM_RIGHT)

  // With pixel offsets
  comp.add(transparent).at(Anchor.CENTER, 100, 50) // 100px right, 50px down
  comp.add(transparent).at(Anchor.TOP_RIGHT, -20, 20) // 20px from edges
  ```

  ```python Python theme={"dark"}
  from videobgremover import Anchor

  # Basic positioning
  comp.add(transparent).at(Anchor.CENTER)
  comp.add(transparent).at(Anchor.TOP_LEFT)
  comp.add(transparent).at(Anchor.BOTTOM_RIGHT)

  # With pixel offsets
  comp.add(transparent).at(Anchor.CENTER, dx=100, dy=50)  # 100px right, 50px down
  comp.add(transparent).at(Anchor.TOP_RIGHT, dx=-20, dy=20)  # 20px from edges
  ```
</CodeGroup>

## Size Modes

Choose how your videos are sized within the composition:

### CONTAIN (Fit Within Canvas)

Scales video to fit within canvas while preserving aspect ratio:

<CodeGroup>
  ```typescript Node.js theme={"dark"}
  import { SizeMode } from '@videobgremover/sdk'

  // Fit transparent video within canvas (letterbox/pillarbox if needed)
  comp.add(transparent).size(SizeMode.CONTAIN)
  ```

  ```python Python theme={"dark"}
  from videobgremover import SizeMode

  # Fit transparent video within canvas (letterbox/pillarbox if needed)
  comp.add(transparent).size(SizeMode.CONTAIN)
  ```
</CodeGroup>

### COVER (Fill Canvas)

Scales video to fill entire canvas, may crop edges:

<CodeGroup>
  ```typescript Node.js theme={"dark"}
  // Fill entire canvas (crop if needed)
  comp.add(transparent).size(SizeMode.COVER)
  ```

  ```python Python theme={"dark"}
  # Fill entire canvas (crop if needed)
  comp.add(transparent).size(SizeMode.COVER)
  ```
</CodeGroup>

### PX (Exact Pixels)

Set exact pixel dimensions:

<CodeGroup>
  ```typescript Node.js theme={"dark"}
  // Exact pixel dimensions
  comp.add(transparent).size(SizeMode.PX, { width: 800, height: 600 })
  ```

  ```python Python theme={"dark"}
  # Exact pixel dimensions
  comp.add(transparent).size(SizeMode.PX, width=800, height=600)
  ```
</CodeGroup>

### CANVAS\_PERCENT (Percentage of Canvas)

Size relative to canvas dimensions:

<CodeGroup>
  ```typescript Node.js theme={"dark"}
  // Square percentage (50% of both width and height)
  comp.add(transparent).size(SizeMode.CANVAS_PERCENT, { percent: 50 })

  // Separate width/height percentages
  comp.add(transparent).size(SizeMode.CANVAS_PERCENT, { width: 75, height: 25 })

  // Width only (height maintains aspect ratio)
  comp.add(transparent).size(SizeMode.CANVAS_PERCENT, { width: 60 })

  // Height only (width maintains aspect ratio)
  comp.add(transparent).size(SizeMode.CANVAS_PERCENT, { height: 40 })
  ```

  ```python Python theme={"dark"}
  # Square percentage (50% of both width and height)
  comp.add(transparent).size(SizeMode.CANVAS_PERCENT, percent=50)

  # Separate width/height percentages
  comp.add(transparent).size(SizeMode.CANVAS_PERCENT, width=75, height=25)

  # Width only (height maintains aspect ratio)
  comp.add(transparent).size(SizeMode.CANVAS_PERCENT, width=60)

  # Height only (width maintains aspect ratio)
  comp.add(transparent).size(SizeMode.CANVAS_PERCENT, height=40)
  ```
</CodeGroup>

### SCALE (Relative to Original)

Scale relative to the video's original dimensions:

<CodeGroup>
  ```typescript Node.js theme={"dark"}
  // Uniform scaling (150% of original size)
  comp.add(transparent).size(SizeMode.SCALE, { scale: 1.5 })

  // Non-uniform scaling (200% width, 80% height)
  comp.add(transparent).size(SizeMode.SCALE, { width: 2.0, height: 0.8 })

  // Width-only scaling (maintains aspect ratio)
  comp.add(transparent).size(SizeMode.SCALE, { width: 1.2 })

  // Height-only scaling (maintains aspect ratio)
  comp.add(transparent).size(SizeMode.SCALE, { height: 0.7 })
  ```

  ```python Python theme={"dark"}
  # Uniform scaling (150% of original size)
  comp.add(transparent).size(SizeMode.SCALE, scale=1.5)

  # Non-uniform scaling (200% width, 80% height)
  comp.add(transparent).size(SizeMode.SCALE, width=2.0, height=0.8)

  # Width-only scaling (maintains aspect ratio)
  comp.add(transparent).size(SizeMode.SCALE, width=1.2)

  # Height-only scaling (maintains aspect ratio)
  comp.add(transparent).size(SizeMode.SCALE, height=0.7)
  ```
</CodeGroup>

### FIT\_WIDTH / FIT\_HEIGHT

Scale to match specific canvas dimension:

<CodeGroup>
  ```typescript Node.js theme={"dark"}
  // Scale to match canvas width (height adjusts to maintain aspect ratio)
  comp.add(transparent).size(SizeMode.FIT_WIDTH)

  // Scale to match canvas height (width adjusts to maintain aspect ratio)
  comp.add(transparent).size(SizeMode.FIT_HEIGHT)
  ```

  ```python Python theme={"dark"}
  # Scale to match canvas width (height adjusts to maintain aspect ratio)
  comp.add(transparent).size(SizeMode.FIT_WIDTH)

  # Scale to match canvas height (width adjusts to maintain aspect ratio)
  comp.add(transparent).size(SizeMode.FIT_HEIGHT)
  ```
</CodeGroup>

## Visual Effects

### Opacity

Control layer transparency:

<CodeGroup>
  ```typescript Node.js theme={"dark"}
  comp.add(transparent).opacity(0.7) // 70% opacity
  comp.add(transparent).opacity(0.3)      // 30% opacity
  comp.add(transparent).opacity(0.0)   // Invisible
  ```

  ```python Python theme={"dark"}
  comp.add(transparent).opacity(0.7)  # 70% opacity
  comp.add(transparent).opacity(0.3)       # 30% opacity
  comp.add(transparent).opacity(0.0)    # Invisible
  ```
</CodeGroup>

## Size Mode Comparison

| Mode                | Use Case             | Aspect Ratio         | Example            |
| ------------------- | -------------------- | -------------------- | ------------------ |
| **CONTAIN**         | Fit entire video     | Preserved            | Video player       |
| **COVER**           | Fill canvas          | Preserved (may crop) | Background video   |
| **PX**              | Exact dimensions     | May stretch          | Fixed overlays     |
| **CANVAS\_PERCENT** | Responsive sizing    | Preserved            | Picture-in-picture |
| **SCALE**           | Relative to original | Configurable         | Zoom effects       |
| **FIT\_WIDTH**      | Match canvas width   | Preserved            | Full-width banner  |
| **FIT\_HEIGHT**     | Match canvas height  | Preserved            | Sidebar video      |

## Practical Examples

### Picture-in-Picture

Classic PIP layout with main video and small overlay:

<CodeGroup>
  ```typescript Node.js theme={"dark"}
  // Main video (full screen)
  comp.add(mainVideo, 'main')
    .at(Anchor.CENTER)
    .size(SizeMode.CONTAIN)

  // PIP video (small, top-right corner)
  comp.add(pipVideo, 'pip')
    .at(Anchor.TOP_RIGHT, -30, 30)
    .size(SizeMode.CANVAS_PERCENT, { percent: 25 })
    .opacity(0.9)
  ```

  ```python Python theme={"dark"}
  # Main video (full screen)
  comp.add(main_video, 'main') \
      .at(Anchor.CENTER) \
      .size(SizeMode.CONTAIN)

  # PIP video (small, top-right corner)
  comp.add(pip_video, 'pip') \
      .at(Anchor.TOP_RIGHT, dx=-30, dy=30) \
      .size(SizeMode.CANVAS_PERCENT, percent=25) \
      .opacity(0.9)
  ```
</CodeGroup>

### Side-by-Side Comparison

Two videos side by side:

<CodeGroup>
  ```typescript Node.js theme={"dark"}
  // Left transparent video
  comp.add(transparent1)
    .at(Anchor.CENTER_LEFT, 50)
    .size(SizeMode.CANVAS_PERCENT, { width: 45 })

  // Right transparent video
  comp.add(transparent2)
    .at(Anchor.CENTER_RIGHT, -50)
    .size(SizeMode.CANVAS_PERCENT, { width: 45 })
  ```

  ```python Python theme={"dark"}
  # Left transparent video
  comp.add(transparent1) \
      .at(Anchor.CENTER_LEFT, dx=50) \
      .size(SizeMode.CANVAS_PERCENT, width=45)

  # Right transparent video
  comp.add(transparent2) \
      .at(Anchor.CENTER_RIGHT, dx=-50) \
      .size(SizeMode.CANVAS_PERCENT, width=45)
  ```
</CodeGroup>

### Overlay Grid

Multiple small overlays in a grid:

<CodeGroup>
  ```typescript Node.js theme={"dark"}
  const gridSize = 20 // 20% of canvas for each video
  const margin = 30   // 30px margin from edges

  // 2x2 grid
  comp.add(transparent1).at(Anchor.TOP_LEFT, margin, margin)
      .size(SizeMode.CANVAS_PERCENT, { percent: gridSize })
  comp.add(transparent2).at(Anchor.TOP_RIGHT, -margin, margin)
      .size(SizeMode.CANVAS_PERCENT, { percent: gridSize })
  comp.add(transparent3).at(Anchor.BOTTOM_LEFT, margin, -margin)
      .size(SizeMode.CANVAS_PERCENT, { percent: gridSize })
  comp.add(transparent4).at(Anchor.BOTTOM_RIGHT, -margin, -margin)
      .size(SizeMode.CANVAS_PERCENT, { percent: gridSize })
  ```

  ```python Python theme={"dark"}
  grid_size = 20  # 20% of canvas for each transparent video
  margin = 30     # 30px margin from edges

  # 2x2 grid
  comp.add(transparent1).at(Anchor.TOP_LEFT, dx=margin, dy=margin) \
      .size(SizeMode.CANVAS_PERCENT, percent=grid_size)
  comp.add(transparent2).at(Anchor.TOP_RIGHT, dx=-margin, dy=margin) \
      .size(SizeMode.CANVAS_PERCENT, percent=grid_size)
  comp.add(transparent3).at(Anchor.BOTTOM_LEFT, dx=margin, dy=-margin) \
      .size(SizeMode.CANVAS_PERCENT, percent=grid_size)
  comp.add(transparent4).at(Anchor.BOTTOM_RIGHT, dx=-margin, dy=-margin) \
      .size(SizeMode.CANVAS_PERCENT, percent=grid_size)
  ```
</CodeGroup>

## Z-Order (Layer Stacking)

Control which layers appear in front:

<CodeGroup>
  ```typescript Node.js theme={"dark"}
  // Background layer (behind everything)
  comp.add(backgroundVideo, 'bg').z(0)

  // Main content (middle layer)
  comp.add(mainVideo, 'main').z(10)

  // Overlay effects (in front)
  comp.add(overlayVideo, 'overlay').z(20)

  // Logo (always on top)
  comp.add(logoVideo, 'logo').z(100)
  ```

  ```python Python theme={"dark"}
  # Background layer (behind everything)
  comp.add(background_video, 'bg').z(0)

  # Main content (middle layer)
  comp.add(main_video, 'main').z(10)

  # Overlay effects (in front)
  comp.add(overlay_video, 'overlay').z(20)

  # Logo (always on top)
  comp.add(logo_video, 'logo').z(100)
  ```
</CodeGroup>

## Alpha Channel Control

Control transparency processing for each layer:

<CodeGroup>
  ```typescript Node.js theme={"dark"}
  // Use alpha channel (default - transparent background shows through)
  comp.add(transparent).alpha(true)

  // Ignore alpha channel (opaque - background becomes black)
  comp.add(transparent).alpha(false)
  ```

  ```python Python theme={"dark"}
  # Use alpha channel (default - transparent background shows through)
  comp.add(transparent).alpha(enabled=True)

  # Ignore alpha channel (opaque - background becomes black)
  comp.add(transparent).alpha(enabled=False)
  ```
</CodeGroup>

## Tips & Best Practices

### Responsive Design

Use percentage-based sizing for responsive layouts:

```typescript theme={"dark"}
// Main content takes 70% width, sidebar takes 25%
comp.add(mainVideo, 'main').size(SizeMode.CANVAS_PERCENT, { width: 70 })
comp.add(sideVideo, 'side').size(SizeMode.CANVAS_PERCENT, { width: 25 })
```

### Visual Hierarchy

* Use z-order to control layer stacking
* Use opacity to create depth
* Use size to emphasize importance

## What's Next?

<CardGroup cols={2}>
  <Card title="⏰ Control Timing" icon="clock" href="/video-composition/timing">
    Learn how to control when layers appear and disappear
  </Card>

  <Card title="🎬 Export Your Video" icon="film" href="/video-composition/export-formats">
    Choose the right export format and quality settings
  </Card>
</CardGroup>