LOG IN SIGN UP
Documentation

Overlay Pad

Description

The overlay pad parameter adds padding to the edge of an overlay image.

API Pattern

overlay-pad={top},{right},{bottom},{left}

Parameter

Parameter Description
overlay-pad Add pixels to the edge of an overlay image.

Parameter Values

Value Units Description
top Pixels or Percentage Top edge of the overlay image.
right Pixels or Percentage Right edge of the overlay image.
bottom Pixels or Percentage Bottom edge of the overlay image.
left Pixels or Percentage Left edge of the overlay image.

Notes

  1. By default overlay padding applies a background color of white.
  2. If the overlay image contains a transparent background, the overlay padding will be made up of transparent pixels.
  3. Values can be specified using CSS style shorthand values.
  4. CSS shorthand allows for all edges to be specified in one property.
  5. Pixel rounding is performed on all calculations in a decimal format (with as much accuracy as possible). The final value is then rounded down.

Examples

Overlay pad the top edge 25px, right edge 50px, bottom edge 75px and left edge 100px.

sub vcl_recv {
  #FASTLY recv
    if (req.url.qs ~ "overlay") {
      set req.http.X-fastly-imageopto-overlay = "overlay=/img/overlay.png&overlay-pad=25,50,75,100";
    }
  return(lookup);
 }

Overlay pad the top edge 25px, right and left edge 50px, bottom edge 75px.

sub vcl_recv {
  #FASTLY recv
    if (req.url.qs ~ "overlay") {
      set req.http.X-fastly-imageopto-overlay = "overlay=/img/overlay.png&overlay-pad=25,50,75";
    }
  return(lookup);
 }

Overlay pad top and bottom edge 25px, right and left edge 50px.

sub vcl_recv {
  #FASTLY recv
    if (req.url.qs ~ "overlay") {
      set req.http.X-fastly-imageopto-overlay = "overlay=/img/overlay.png&overlay-pad=25,50";
    }
  return(lookup);
 }

Overlay pad all edges by 25%.

sub vcl_recv {
  #FASTLY recv
    if (req.url.qs ~ "overlay") {
      set req.http.X-fastly-imageopto-overlay = "overlay=/img/overlay.png&overlay-pad=0.25";
    }
  return(lookup);
 }