Overlapping of images - Limiting system of dealing with multiple
Every time I re-read information about multiple backgrounds in
CSS3, I notice that it is repeatedly stated that multiple backgrounds
are best overlapped. But doesn't this seem like a really limiting way
of doing multiple backgrounds? What if I want to put images on the far
left and far right sides of the container, plus one down the middle?
The current system either forces the use of pixels for sizing, or
assumes that the designer will overlap images. What if these images
are PNG's with transparent sections, or SVG's? Then overlapping breaks
the images and there is no way of avoiding it.
Instead of this really limiting system, I suggest allowing the
user to use the rect() and inset-rect() structures as values in
background-position, which could then be used as bounding boxes for the
image behavior. Images could then be tiled in the bounding boxes,
without danger of overlapping destroying transparency effects. They
would also allow the users to position background images with respect
to the right and bottom edges of the container, something which
otherwise could only be done with calc().
Background-size & stretching
I believe that background-stretch would be a better name for this
property, if for no other reason than it's more telling of the
property's true effect on background images. Though IMPO, maybe it
would be better for stretch/round to be specified through another
property (with default value tile or repeat), and use background-size
as a modifier to the images' intrinsic width/height.
More values for background-origin?
I believe that background-origin should contain more values.
Other than padding and border, there should at least be a value 'root'
which positions images with respect to the document (like
background-attachment: fixed, except not fixed to the viewport). In
fact, maybe it would be better if background-attachment only determined
whether elements scroll or are fixed, and let background-origin
determine what they're fixed to (but this might break backwards
compatibility). I have found in CSS design there are situations which
call for the ability for different containers to be able to position
elements with respect to one common location, and at the moment the
only way to do so is either using background-attachment: fixed (and
attaching the image to the background may not alway be the desired
result), or by manipulating the value of background-position (which
isn't always an option).
Also, maybe there should be a way to pick a parent element to be
the origin of the image lineup. Though this may be hard to do in a
reasonable way and may not make much sense, since I believe root and
background-position could do something like this.
http://www.mozilla.org/products/firefox/ - Get Firefox!
http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox!
Please avoid sending me Word or PowerPoint attachments.