Pad

      Last updated May 18, 2020

    The pad parameter adds additional pixels to the edge of an image. This can be useful for adding whitespace to an image.

    API Pattern

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

    Parameter

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

    Parameter Values

    Value Units Description
    top Pixels or Percentage Top Edge.
    right Pixels or Percentage Right Edge.
    bottom Pixels or Percentage Bottom Edge.
    left Pixels or Percentage Left Edge.

    Notes

    1. By default padding applies a background color of white.
    2. If the source image contains a transparent background and the output image also contains transparency, the padding will be made up of transparent pixels.
    3. When using pad and canvas at the same time pad will be ignored.
    4. Values can be specified using CSS style shorthand values. (see CSS Margin or CSS Padding for more examples).
    5. CSS shorthand allows for all edges to be specified in one property.
    6. 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

    Description HTML Demo
    Pad top edge 25px, right edge 50px, bottom edge 75px and left edge 100px. <img src="image.jpg?pad=25,50,75,100"/> Example
    Pad top edge 25px, right and left edge 50px, bottom edge 75px. <img src="image.jpg?pad=25,50,75"/> Example
    Pad top and bottom edge 25px, right and left edge 50px. <img src="image.jpg?pad=25,50"/> Example
    Pad all edges by 25%. <img src="image.jpg?pad=0.25"/> Example
    Advanced Examples (Combining Additional Parameters)
    Description HTML Additional Param Demo
    Add a border to an image - Add a 10px red border to an image. <img src="image.jpg?pad=10&bg-color=FF0000"/> bg-color Example
    Back to Top