Overlay pad

      Last updated May 18, 2020

    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.

    1
    2
    3
    4
    5
    6
    7
    
    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.

    1
    2
    3
    4
    5
    6
    7
    
    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.

    1
    2
    3
    4
    5
    6
    7
    
    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%.

    1
    2
    3
    4
    5
    6
    7
    
    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);
     }
    
    Back to Top