Making Background Image Opaque

[etidd]

Hello everyone,

I want to put this image of ivy that I took behind my home page content. It was very convenient to set the background image for the container as this image I attached to the thread, but if I add opacity to the container, it will make my whole page transparent. Does anybody know a way around this?ivy.jpg

[Serj]

Need alot more info than this to answer your question, where is the HTML, CSS, Javascript?

[sdt76]

I'm not sure what the trick would be CSS wise. I have always wondered about that since I have come across the same problem. My solution has been to use Photoshop to lower the opacity in a layer above a flat color. Then save it as a JPG. But if anyone has a way to do it with CSS only, I'd be interested in that too.

[kohoutek]

It's possible to do. See here.

[ralph.m]

You could probably also make the image semi-transparent in Photoshop and save it as a .png.

[etidd]

Aren't .png images less compatible in general?

That's a really large image. I want to shave it down to something tolerable in size and insert two images on the leftside and right side. Then for the the three side window graphics, I would have to reset the opacity to 1 and 100. This is my guess:

#leftside{
        background:url("ivyleft.jpg") no-repeat scroll 50% 300px transparent;
	float:left;
	margin:405px 0 0 0; 
	width:auto;
        /*for IE*/
	filter:alpha(opacity=30);
	/*standard CSS3*/
	opacity:0.3;
        
}
	#leftsidestart{
		float:left;
		background:url("sidewindowstart.gif") no-repeat scroll 50% 0 transparent;
		width:27px;
		height:250px;
		margin:0;
                /*for IE*/
	        filter:alpha(opacity=100);
	        /*standard CSS3*/
	        opacity:1;
	}
	#leftsidebody{
		margin:0 auto;
		float:left;
		background:url("sidewindowbody.gif") repeat-x scroll 50% 0 transparent;
		width:240px;
		height:250px;
                /*for IE*/
	        filter:alpha(opacity=100);
	        /*standard CSS3*/
	        opacity:1;
	}
	#leftsideend{
		float:left;
		background:url("sidewindowend.gif") no-repeat scroll 50% 0 transparent;
		width:16px;
		height:250px;
		margin:0;
                /*for IE*/
	        filter:alpha(opacity=100);
	        /*standard CSS3*/
	        opacity:1;
	}

Let me know what you think about this idea.

[ralph.m]

Aren't .png images less compatible in general?

No, they are fine. IE6 doesn't like transparent ones, but there are fixes for that if you care. I don't test IE6 any more.

[etidd]

I think IE6 is obsolete, too.

[etidd]

Blam! Check out this fall/winter background gif. atlantareviewgroup.com

[Stomme poes]

When I want a background image to look semi-transparent, and there's no other images or stuff underneath that need to show through, I create a fake semi-trans png in my image editor and flatten it.

Meaning, if the website background colour is white, and I need a faded-looking background image sitting on top of it, I just place a white layer under the image, lower opacity on the image on the upper layer, merge, flatten to 8-bit png if possible (if I need more colours I don't, but I still remove the alpha layer), upload. Much smaller filesize than a real semi-trans png.

But if I need an image to be full-colour and only faded when peeking through a container sitting on top (like a centered main content box), I can do one of two things:
use a small and tiled semi-trans png (like 8x8 or some multiples of 8 vert and 4 horiz) and let it tile the background of the container (this means IE6 gets a solid colour, you set this by saving your semi-trans png with the desired colour sitting as the background colour in your colour pallette), OR use CSS rgba(); background colour with a solid colour stated before that for IE6 and 7 (and 8?). More IE's get a solid colour but frankly, solid colours are easier to read on anyway. IE users get more win.