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?
Need alot more info than this to answer your question, where is the HTML, CSS, Javascript?
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.
You could probably also make the image semi-transparent in Photoshop and save it as a .png.
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.
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.
I think IE6 is obsolete, too.
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.