Resell Print? Click here to see how we can help


Graphic Design Forums: UK forums for graphic designers » Website Design Forums: » Website Coding & Programming Forum: » CSS - transparent Backgrounds

Reply
Old 04-23-2009, 03:26 PM   #1
Member
 
Join Date: Dec 2008
Location: Fife, Scotland
Posts: 63
Thanks: 6
Thanked 10 Times in 8 Posts
Send a message via Skype™ to MarkS
Default CSS - transparent Backgrounds

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.

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??
MarkS is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Share on FacebookStumble this Post!Twit this!
Reply With Quote
Old 04-23-2009, 04:44 PM   #2
Senior Member
 
Pete's Avatar
 
Join Date: Jan 2009
Location: Chorlton, Manchester
Posts: 106
Thanks: 5
Thanked 18 Times in 15 Posts
Default

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 by Pete; 04-23-2009 at 04:46 PM.
Pete is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Share on FacebookStumble this Post!Twit this!
Reply With Quote
The Following User Says Thank You to Pete For This Useful Post:
MarkS (04-23-2009)
Old 04-23-2009, 06:00 PM   #3
Senior Member
 
Join Date: Mar 2009
Location: Hampshire
Posts: 164
Thanks: 4
Thanked 13 Times in 13 Posts
Default

or just simply use relative positioning and use margin: 0 auto 0 auto; in your css
KevJaques is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Share on FacebookStumble this Post!Twit this!
Reply With Quote
Old 04-23-2009, 06:09 PM   #4
Member
 
Join Date: Dec 2008
Location: Fife, Scotland
Posts: 63
Thanks: 6
Thanked 10 Times in 8 Posts
Send a message via Skype™ to MarkS
Default

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!

MarkS is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Share on FacebookStumble this Post!Twit this!
Reply With Quote
Old 04-24-2009, 05:11 PM   #5
Member
 
Join Date: Dec 2008
Location: Fife, Scotland
Posts: 63
Thanks: 6
Thanked 10 Times in 8 Posts
Send a message via Skype™ to MarkS
Default 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.

Cheers guy's again for the help and pointers
MarkS is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Share on FacebookStumble this Post!Twit this!
Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On



Flyer Printing | Print Reseller Scheme | Graphic Design | Logo Designer | Web Design UK | Graphic Design UK | Letterhead Printing
Business Card Printing | UK Business Forum | Logo Designer | NCR Pads | NCR Books | Receipt Books | Drinks Coasters | A6 Flyers | A5 Leaflets
Web Design & Development | vBulletin Skins | Small Business Websites | Leaflets | Leaflet Printing | Web Design Liverpool | Invoice Books


DISCLAIMER: All posts on this forum express the views and opinions of the author only, not the owners, staff or advertisers, hence we will not be held liable.


Powered by vBulletin®
© Copyright Jelsoft Enterprises Ltd
SEO by vBSEO 3.2.0 RC5 ©2008, Crawlability, Inc.