Hear from Slack, the ACLU, TED, & more at our customer summit in San Francisco Register
LOG IN SIGN UP
Documentation

Pad

Features

Description

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