pad
Add pixels to the edge of an image.
Syntax
pad={all-sides}pad={top-and-bottom},{left-and-right}pad={top},{left-and-right},{bottom}pad={top},{right},{bottom},{left}
Sub-parameters
Param | Units |
---|---|
top | Pixels or Percentage |
right | Pixels or Percentage |
bottom | Pixels or Percentage |
left | Pixels or Percentage |
Notes
- By default padding applies a background color of white. See
bg-color
to change that. - If the source image contains a transparent background and the output image also contains transparency, the padding will be made up of transparent pixels.
- When using
pad
andcanvas
at the same time,pad
will be ignored. - Values can be specified using CSS style shorthand values. (see CSS Margin or CSS Padding for more examples).
- CSS shorthand allows for all edges to be specified in one property.
- Any fractional pixel measurements will be rounded to the nearest whole pixel.
Examples
Click the links to view the transformed image using a demo Fastly IO service.
Example usage | Description |
---|---|
?pad=25,50,75,100 | Pad top edge 25px, right edge 50px, bottom edge 75px and left edge 100px |
?pad=25,50,75 | Pad top edge 25px, right and left edge 50px, bottom edge 75px |
?pad=25,50 | Pad top and bottom edge 25px, right and left edge 50px |
?pad=0.25 | Pad all edges by 25% |
User contributed notes
BETADo you see an error in this page? Do have an interesting use case, example or edge case people should know about? Share your knowledge and help people who are reading this page! (Comments are moderated; for support, please contact support@fastly.com)