Imgix APIsRendering APITextText Background Color

Text Background Color

txt-bg

The txt-bg parameter draws a colored box behind the whole text block, which is how you keep a caption readable over a busy photograph without blurring the image itself.

It accepts any color Imgix accepts: a 3-, 6- or 8-digit hexadecimal value, or a CSS color keyword. In the 8-digit form the first pair of digits is the alpha, so txt-bg=80000000 is a half-transparent black scrim.

No background box
sandbox-demo
txt-bg=263E65 with txt-pad=20
sandbox-demo

Padding Becomes Box Padding

Without a background box, txt-pad is the gap between the text and the edge of the image. With txt-bg set, it becomes the padding inside the box, and its default drops to 0 — so a box with no txt-pad hugs the glyphs tightly.

Because the box is padded outward from the text, an edge-aligned text layer pushes its padding past the image edge and the box looks clipped. Give edge-aligned text enough room, or align it away from the edge.

txt-bg with no txt-pad hugs the text
sandbox-demo
txt-pad=32 pads the inside of the box
sandbox-demo

Round the box with txt-radius. Fade the box along with the text using txt-alpha.

The typesetting endpoint ignores txt-bg.