etidd — 2011-11-01T18:22:10-04:00 — #1
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?
serj — 2011-11-01T19:13:45-04:00 — #2
sdt76 — 2011-11-01T19:16:26-04:00 — #3
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 — 2011-11-01T19:22:33-04:00 — #4
It's possible to do. See here.
ralphm — 2011-11-01T21:49:38-04:00 — #5
You could probably also make the image semi-transparent in Photoshop and save it as a .png.
etidd — 2011-11-06T17:55:32-05:00 — #6
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:
background:url("ivyleft.jpg") no-repeat scroll 50% 300px transparent;
margin:405px 0 0 0;
background:url("sidewindowstart.gif") no-repeat scroll 50% 0 transparent;
background:url("sidewindowbody.gif") repeat-x scroll 50% 0 transparent;
background:url("sidewindowend.gif") no-repeat scroll 50% 0 transparent;
Let me know what you think about this idea.
ralphm — 2011-11-06T17:57:36-05:00 — #7
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 — 2011-11-07T12:18:53-05:00 — #8
I think IE6 is obsolete, too.
etidd — 2011-11-18T00:30:57-05:00 — #9
Blam! Check out this fall/winter background gif. atlantareviewgroup.com
stomme_poes — 2011-11-18T03:25:51-05:00 — #10
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.