double background image

[pinocchio]

Hi !

I don't know if I should post here or in the CSS / Template forum, but as I am definately a newbie, I gues I might as well post here.

I'm trying to upgrade my site with a pattern background, but I would like the pattern to fade in the main area, so that text and pictures are displayed in a more calm environment (see attached). I've managed to get the pattern going quite easily, by modifying the appropriate element in the Style Sheet. Ideally, I would just add another element right below, with a GIF repeating on the y-axis, but it doesn't work :-/

Can any of you tell me how to proceed with this ?


Kind regards, Pino

[mechaflash]

Keep the image background set to only the body, and insert this into CSS

#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.

[pinocchio]

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

[mechaflash]

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:

#header *:not
#left *:not
etc.

So your CSS entry will show:

#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" =/.

[Ruud]

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:

#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.

[mechaflash]

It's cool ruud prove me wrong so I can learn too =D

[Ruud]

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

[thyon]

You should just background color the .container as that encloses both main and left/right.

[Ruud]

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...