Example of expandable image, this image:
is getting expanded as a background of the div element:
Expandable image is a single bitmap image like png, jpeg or gif. New value expand of standard background-repeat attribute is used to declare expandability of the image. Together with background-position it defines how sections of the source image are rendered on the destination.
Formal definition:
background-repeat: expand [stretch-top] [stretch-bottom] [stretch-middle] [stretch-left] [stretch-right]; background-position: top right bottom left;
Where:
top
, right
, bottom
and left
are numbers (number of image pixels) that define widths and heights of margins on image that split the image into 9 areas. These areas will be copied, tiled or stretched on destination area (see illustration below);stretch-top
, stretch-bottom
, stretch-middle
, stretch-left
and stretch-right
are modifiers that define how correspondent section is copied to the destination section. Without stretch-top, for example, top section of source is tiled on top section of the destination. And with stretch-top defined top section is stretched to fill destination's top section in full.Note: background-repeat:expand image is rendered to fill padding box of the element in full thus we can reuse background-position attribute for the purpose of defining sections of the image.
Here is an illustration of how image (above) is getting expanded to the destination <div> element that is defined in CSS as:
div { background-image:url(back.png); background-repeat:expand; /* simple expanding by tiling */ background-position:14 14 14 14; /* "border" sections are all 14px width on this image */ padding:14px; height:100px; }
Full HTML source of the document used in this sample is:
<html> <head> <style> body { background-color: white white bisque bisque; margin:0; padding:20px; } div { background-image:url(back.png); background-repeat:expand; background-position:14 14 14 14; padding:14px; height:100px; } </style> </head> <body> <div>Hello world!</div> </body> </html>
Another image that we want to expand by tiling in horizontal direction and stretching in vertical direction. Source:
and examples of its rendering on three buttons:
And HTML source of the document rendered above:
<html> <head> <style> body { background-color: white white bisque bisque; margin:0; padding:20px; } button { background-image:url(back-stretch.png); background-repeat:expand stretch-left stretch-middle stretch-right; background-position:8 8 8 8; padding:10px; } </style> </head> <body> Buttons with custom shapes: <button>Small</button>, <button>Fairly big with<br/>multiline text</button> and <button>Even bigger<br/>because it has three<br/>lines of text</button> </body> </html>