Resized background image

We're translating some private presentation format to CSS and have hit the
following problem. We'd like to have an element with a background image
which is resized to fit the element (instead of being tiled), something we
would have liked to write as:

<SPAN STYLE="
    background-image: ...;
    background-size: 100% 100%;
    position: absolute;
    width: ...;
    height: ...;
">
...some stuff here...
</SPAN>

But where the image is resized to fit the element. We've ended up adding an:

<IMG HREF="..." STYLE="
    width: 100%;
    height: 100%;
    z-index: -1;
">

Within the SPAN. This isn't quite right, however; for example it interacts
badly with scrolling, and DOM manipulation of the image is very different
then any other type of a background image.

We've already got background-position, so having a background-size attribute
doesn't seem out of place. How about adding it to CSS3?

Another question: suppose that a background-position is specified together
with a repeat in the same axis, for example:

background-position: 50% 0%;
background-repeat: repeat-x;

Should the background image cover only half the element (the right one), or
should it cover it all? IMO controlling the position of the tiling boundary
while covering the whole element is more important/useful/intuitive then
covering just a part of the element, but the CSS2 specifications aren't
clear on this. IE4 implements this as partial element cover, but that
doesn't prove a thing :-)

Share & Enjoy,

    Oren Ben-Kiki

Received on Sunday, 6 June 1999 05:46:16 UTC