<Glazblog/>

Editor and CSS 3 Backgrounds

By glazou on Friday 3 September 2010, 10:54 - Mozilla - Permalink

In the editor (Mozilla Composer, Nvu, KompoZer), there is a dialog for image insertion. That dialog shows a preview of the currently selected image. That preview relies on the following code:

  1. load the image inside an <html:img> element
  2. wait until it's loaded
  3. get its natural width and height
  4. resize the image to make it fit nicely in its container box, whatever the width and height of the image
With the help of CSS 3 Backgrounds, this code is gone and all we have now is:
  1. load the image as the background image of <xul:box> element

with the following CSS styles on that box:

background-size: contain;
background-repeat: no-repeat;
background-position: center;

:-)