At 09:24 PM 8/8/2006, Pamela Jones wrote:
I am working on a site for a client for which the design requires
some different subtle images in
the background (e.g. top, bottom left and bottom right). I'm facing
difficulty because I have a
container div which contains three columns, each with a significant
margin. The backgrounds
are all within the outer container, crossing columns where necessary.
(e.g. the bottom left image
sits behind the first two columns, the top image spans all three
columns and the bottom right image
sits behind only the right column).
I would imagine you could do this with PNG images with alpha
transparency, with these provisos:
- To make the alpha transparency work in IE you'll need a second set
of rules, e.g.:
div#a
{
background: url("images/logo.png") left top no-repeat;
}
/* for IE */
* html div#a
{
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=image src='images/logo.png');
}
See:
http://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp
google "css png" for more
- I haven't found a way to automatically repeat a background image
using the Microsoft.AlphaImageLoader. Unless someone else can come
to our rescue, you'll need to accomplish div-stretching using sliding
doors, e.g.
http://alistapart.com/articles/slidingdoors/
For sliding pieces, sizingMethod=crop is the way to go.
sizingMethod=scale stretches an image to fit its container, OK for
monochromatic blocks but distorts images with texture.
sizingMethod=image stretches the container to fit the natural image size.
Regards,
Paul
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
