how to make transparent background?

hi guys
does anyone knows how to make transparent background using CSS. i intend to use a transparent background for my upcoming site.. and would really apreciate the help...

 

Well by default the Css value for property background is Transparent. So it will display anything below it.

Here's the Css Code:

background: transparent;

 

try this http://www.w3schools.com/css/css_image_transparency.asp for image transparency or if you want a transparent image as a background image then you are going to have to create and save it as a PNG image or cut the background out using gimp or photoshop depending what you want to do.

 

hey casbe79 thanks for the link.. it sure helps.. however i was actually looking for a way to make the background transparent, and i mean only the background. the method it shows on w3school, it doesnt only make transparent the background but the text of the div tag too.
i just want to find a way to make the background of a div tag transparent not the text with it..
any additional help is appreciated....

 

Oh if you use CSS opacity, it gets inherited by all children.

To do the background of the body either make a background image look half-transparent in your image editor (like Photoshop or whatever) or you'll need to do a complicated trick.

http://www.sitepoint.com/forums/showthread.php?t=610506

 

thanks Stomme poes....... i dont know whether simple thanks is allowed in this forum.. but i'm gonna do it anyway...

 

Actually, it's not as complicated as stuck-up point's posters would have you believe.

It can be done, all you need is a wrapping element around what you want the background on and a sibling DIV.

Same technique I use here:
http://battletech.hopto.org/html_tutorials/cssShadow/template.html

In modern browsers % heights will be based off the dynamic height of a parent element if that parent is position:relative; This allows us to easily make an absolute positioned sibling element under our content to which our transparency is applied.

IE6/earlier does not support this, but we can fake it with an expression... The layout will only break for IE6 users with javascript off, and then all it does is give them a small stripe of transparency, the page should still be usable. As a rule, I figure if a user is smart enough to turn off .js in IE6, they probably aren't dumb enough to be still using IE in the first damned place

Here's a simpler version of that method showing just a transparent background while the foreground content does not get any opacity applied.

http://www.cutcodedown.com/for_others/LOD/template.html

... as with all my examples the directory
http://www.cutcodedown.com/for_others/LOD/

is unlocked so you can grab the gooey bits. Valid XHTML 1.0 Strict, Would be valid CSS2 if not for the IE workarounds and different methods of calling opacity cross-browser, tested working IE 5.5, 6, 7 & 8, Opera 9.64 and 10, FF 2 and 3, and the latest iterations of Safari and Chrome.

The heart of it is the parent wrapper and the two siblings:

	<div class="trannyWrapper">
		<div class="trannyBackground"></div>
		<div class="trannyContent">
			<p>Your Test Content goes here.</p>
			<p>Your Test Content goes here.</p>
			<p>Your Test Content goes here.</p>
			<p>Your Test Content goes here.</p>
		<!-- .trannyContent --></div>
	<!-- .trannyWrapper --></div>

Code (markup):

The CSS that makes it work isn't too complex:

.trannyWrapper {
	position:relative;
	zoom:1; /* trip haslayout */
}

.trannyBackground {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#000;
	opacity:0.5;
	-moz-opacity:0.5;
	filter:alpha(opacity=50);
}

* html .trannyBackground {
	/* 
		IE6/earlier fails to report height properly, 
		but we can fake it with an expression
	*/
	height:expression(
		this.parentElement.offsetHeight+'px'
	);
}

.trannyContent {
	position:relative;
}

Code (markup):

The outer wrapper needs position:relative both for absolute positioning our background div and so the height is reported properly. A haslayout trigger avoids some minor bugs. I used zoom since lord knows what your final version might use for sizing (if any).

the background DIV is absolute positioned and sized to 100% so it SHOULD fill the parent element. Background and opacity are pretty much nothing fancy.

We do end up using a * html hack to hide our IE6/earlier specific expression. Simple expression, pull the parent element's height, set our background div to that.

The content area needs position:relative so it depth sorts over our background. Because of our source order, this means we don't even need to dink with z-index!

It's a little saggy around the mid-section, but it's not TOO complex.

Hope this helps.

 

NO do NOT use PNG file - use a transparent gif - either in Photoshop or Fireworks (check Fireworks help for how to create a transparent gif - I managed this yesterday and it DOES work).

 

dude u r an absolute genius....
cant thank u enough....

 

It seems when the OP asks for "transparency" s/he really means "semi-transparency". You cannot do this in a gif. It's transparent pixel or not.

Now I'm aware of the Fireworks trick to having semi-transparency in 8-bit pngs (which is pretty cool) but I dunno of any other program who can do that (hint-hint to Gimp devs).
As Fireworks isn't free and is silly-complicated to get working in my OS (Adobe hateses teh linuxes... see how they make their Flash player for Linux, arg), it's nice to mention for anyone who has it or is willing to steal it, but it leaves the rest of us in the cold.

As far as I know, just about any program can make a transparent gif. You don't need a $400 program for that.

And, to tell the truth, it's also possible to make something *look* semi-transparent and make it a jpg even (if it's a faded photo for instance). It depends on what's on your page, but if the page is static-built (nothing moving over patterned backgrounds but stay in place) then you can make an image that imitates see-through with any image type.