Expandable background images is a simple and powerful way of defining flexible borders and backgrounds of DOM elements. Example of expandable image, this image: {{ h-smile:back.png |source}} is getting expanded as a background of the div element: {{ h-smile:final.png |destination}} 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. ===== Tiled expand sample ===== Here is an illustration of how image (above) is getting expanded to the destination

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;
 }

{{ h-smile:schema.png |Illustration of expandable image}} Full HTML source of the document used in this sample is:



  
    
  

  Hello world!

===== Expand with stretchable sections ===== Another image that we want to expand by tiling in horizontal direction and stretching in vertical direction. Source: {{ h-smile:back-stretch.png |Source}} and examples of its rendering on three buttons: {{ h-smile:final-stretch.png |Final rendering}} And HTML source of the document rendered above:



  
    
  

 Buttons with custom shapes:
 ,
  and