Expandable background images is a simple and powerful way of defining flexible borders and backgrounds of DOM elements.

Example of expandable image, this image: source is getting expanded as a background of the div element: 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 <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;
 }
Illustration of expandable image 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>  

Expand with stretchable sections

Another image that we want to expand by tiling in horizontal direction and stretching in vertical direction. Source: Source and examples of its rendering on three buttons: Final rendering 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>

h-smile/expandable-backgrounds.txt · Last modified: 2007/11/24 00:24 by andrew
chimeric.de = chi`s home Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0