Re: double background image
Keep the image background set to only the body, and insert this into CSS
Code:
#header,
#footer,
#left,
#right,
#main
{
background-color: #ffffff;
opacity: .9;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter: alpha(opacity=90);
}
That should give you the effect you want. If you want more opacity, bring it down to .8/80.
Re: double background image
Thanks a lot mechaflash ... I got it working :)
A little problem persists though (actually two) ... not only does the background obey the transparency, but everything goes transparent - including text and pics. Is there a workaround?
And then I'm a bit unsure how I make the background in the left match up with the variable length of the main ... eh window?
Kind regards, Pino
Re: double background image
I'm not sure how well this will work (as i hear many people have problems with it) but maybe use a transparent png image as a background for each column.
I dunno if this will work as it's a fairly new CSS element that I've used only once, but try adding the following:
Code:
#header *:not
#left *:not
etc.
So your CSS entry will show:
Code:
#header,
#header *:not,
#footer,
#footer *:not,
#left,
#left *:not,
#right,
#right *:not,
#main
#main *:not,
{
background-color: #ffffff;
opacity: .9;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter: alpha(opacity=90);
}
This will omit anything 'inside' of the columns so the ':not' basically says "do not include these targets"... then again it might also force the opacity to not take effect because of it. And if it does work, not all browsers support ":not" =/.
Re: double background image
It sort of depends on your overall CSS settings, but you migth be able to just set a background for the wrapper element. You can create a transparent png I assume, so use that like below:
Code:
#wrapper {
background-color: #f2efea; /* that transparent color */
}
body > #wrapper {
background-image: url('/tl_files/path/theimage.png');
background-color: transparent;
}
IE 6 and below will not handle the file correctly so the extra code is for those browsers. It won't be transparent. Mootools and jQuery should be able to make the background transparent as well, but I'd only use that for the browsers that won't do with the image.
Do not use mechaflash's solution because using the Microsoft only filter he proposes is bad practice in general (sorry Mecha) and I'm not sure if the other code will work well.
Re: double background image
It's cool ruud prove me wrong so I can learn too =D
Re: double background image
Quote:
Originally Posted by mechaflash
It's cool ruud prove me wrong so I can learn too =D
I can remember my first transparencies. They where using these filters and I never got it working in all cases. Luckily MS started to discourage the use of IE6
Re: double background image
You should just background color the .container as that encloses both main and left/right.
Re: double background image
Quote:
Originally Posted by thyon
You should just background color the .container as that encloses both main and left/right.
Do you then mean he must also background the header? Otherwise it won't be complete...