Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS - transparent Backgrounds

Discussion in 'Website Coding & Programming Forum:' started by MarkS, Apr 23, 2009.

  1. 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??
  2. Pete

    Pete Member

    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: Apr 23, 2009
  3. KevJaques

    KevJaques Member

    or just simply use relative positioning and use margin: 0 auto 0 auto; in your css
  4. MarkS

    MarkS Member

    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!

  5. MarkS

    MarkS Member

    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:

Share This Page