CSS - transparent Backgrounds

MarkS

MarkS

Member
Ok, I have been trawling the net, and have finally gave up trying to find a successful answer to this problem;
I am doing a site for a client that I do a fair bit of design for print for, and they have asked me to do their website aswell, but I have run into serious problems and I am only at the start!!

They want an image of a wood (or forest) that I use in their print adverts for the background (no problem there I thought), and I have managed to set this to auto resize to fill the full screen, however I want to have an area which will run down the centre of the page (800px wide) and I would LIKE this to be transparent cream colour, of around 50%. The idea being to use this as the parent <DIV> for all else which will go in that area.... so as you may have guessed anything I put within this area will also show the transparent class style.:icon_Wall:

Firstly I can't get the main container (the 800px wide area) to stay centred in the window, but obviously everything else that is within that are is also transparent...

Is there any answer to this problem yet??
 
Instead of using the CSS opacity rule (which also affects child elements). Make yourself a 1px PNG file. and set it as the background for the container. To fix IE6's PNG issue, you can use either of these hacks:

jquery.pngFix.js - PNG transparency for Windows IE 5.5 & 6 (IE PNG Fix)
IE PNG Fix - TwinHelix

I'd advise the jQuery fix as it's more reliable for tiling backgrounds.

There are a couple of ways to center a div. Easiest is to stick a <center> tag below your body tag, then in the css, tell the div to align all text to the left. Another way would be to put the div in a 100% wide container, set the positioning to absolute and use a negative margin, half the width of the div you want to float, like so: Center Absolute Position DIV | marketing . web . design
 
Last edited:
Pete, you're an absolute star, pal!!
I have been muddling over that and trawling the net for a couple of days now to sort this.
I had thought and tried the PNG file method, but I couldn't get it to work properly.

Thanks soo so much!

:icon_thumbup:
 
Does this work?

After a bit more "fiddling" with the code, I think I have it cracked...
Woodmore Golden Retrivers

None of the links on the page are active yet - I want to get the layout of the page perfected before I start to do the rest of the site.
Please bare in mind this is my first attempt at CSS, however any constructive criticism and pointerswill be welcomed.:icon_wink:

Cheers guy's again for the help and pointers :icon_thumbup:
 
You must log in or register to reply here.
Back
Top