Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

semitransparent background 3

Status
Not open for further replies.
davikokar

davikokar

Technical User
May 13, 2004
523
IT
hallo,
do you know if it possible to have a semitransparent bakground? I tried with many image formats but none would work (gif, bmp, jpg, png). Maybe there is another way.
thanks
 
Sort by date Sort by votes

You can put an image into the background of a DIV and then set some transparency filter on the DIV. The end result is about the best you are going to achieve (although it will not be totally cross-browser).

Jeff

 
Upvote 0 Downvote
If "it" is a background, then what's behind it that you will see when it's semi transparent?

If you mean that you wish to make a page element semi transparent then it is possible to apply opacity to elements using CSS and MS filters. Not sure how well it's supported but try this.

Code: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

 <style type="text/css">
	body {
	 background-color:#f00;
	}
	
	.trans {
		opacity:0.85;				
		filter:alpha(opacity=85);
	}
 </style>
</head>

<body>
	<img src="wheel.gif"  alt="put an image here, no transparency" />
	<img src="wheel.gif" class="trans" alt="put the same image here" />
</body>
</html>

The above works in FF and IE6 under Windows


Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r
 
Upvote 0 Downvote
You could use a PNG format image, which supports alpha levels... although this would only work in supported browsers (which doesn't incvlude IE6, even though IE/Mac does!).

That, or using CSS for opacity (as both Jeff and Pete have suggested).

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
thanks to all. I tried with the png but it doesn't work (I'm working with IE6/windows: isn'it the most common browser?). But the opacity filters works: I didn't know about it. Is it part of CSS2 definitions?
 
Upvote 0 Downvote
IE6 for Windows supports 8 bit png's with a transparency, but as you point out this allows only for "on" or "off" transparency and not various levels thereof.

If you are only concerned with what some may term decent browsers, then a 24 bit png with and alpha transparency will look lovely.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r
 
Upvote 0 Downvote
Also note that with 4 lines of CSS, you can get opacity working in most of the common modern browsers: Firefox, Netscape 6+, IE5+, and Safari, as well as any browser that supports the opacity style.

Don't just settle for IE, unless you know your target browser audience.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Dear Karerda,

I supply you with a MS-Explorer PNG hack.
The hack consists of two javascript functions which you will be able to use both or seperated to suit your needs.


This goes in the header of the HTML
Code: 
<!--[if IE]>
<script language="JavaScript" src="/js/PngIeHack.js" type="text/JavaScript">
</script>
<![endif]-->

Save code below as /js/PngIeHack.js

Code: 
	window.attachEvent("onload", correctPNG);
	window.attachEvent("onload", alphaBackgrounds);

function correctPNG() // correctly handle PNG "IMG Element" transparency in Win IE 5.5 or higher.
   {
   for(var i=0; i<document.images.length; i++)
      {
	  var img = document.images[i]
	  var imgName = img.src.toUpperCase()
	  if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
	     {
		 var imgID = (img.id) ? "id='" + img.id + "' " : ""
		 var imgClass = (img.className) ? "class='" + img.className + "' " : ""
		 var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
		 var imgStyle = "display:inline-block;" + img.style.cssText
		 if (img.align == "left") imgStyle = "float:left;" + imgStyle
		 if (img.align == "right") imgStyle = "float:right;" + imgStyle
		 if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
		 var strNewHTML = "<span " + imgID + imgClass + imgTitle
		 + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
	     + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
		 + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
		 img.outerHTML = strNewHTML
		 i = i-1
	     }
      }
   }

function alphaBackgrounds() // correctly handle PNG "BACKGROUNDCOLOUR" transparency in Win IE 5.5 or higher.
{
	var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
	var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
	for (i=0; i<document.all.length; i++){
		var bg = document.all[i].currentStyle.backgroundImage;
		if (itsAllGood && bg){
			if (bg.match(/\.png/i) != null){
				var mypng = bg.substring(5,bg.length-2);
				document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='scale')";
				document.all[i].style.backgroundImage = "url('images/1pixel.gif')";
			}
		}
	}
}

For a working example see this website is currently under construction but it has transparant PNG in the CSS(2) background.

uses the other function because it has transparant icons on top of the navigation background.

If you experience any difficulties, please let me know.

Kind Regards,
Jeroen Haan


HAAN.net, E-Business & Multimedia Solutions, website design, e-commerce,
portal development
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
765
3esolar
3
garcosta
  • Locked
  • Question
CSS Coding for Gradient Color Background for all Platforms
Replies
3
Views
153
1DMF
1DMF
csphard
  • Locked
  • Question
need help with footer h3 background-color. 2
Replies
8
Views
314
vacunita
vacunita
yaknowss
  • Locked
  • Question
Create divs with different background colors
Replies
1
Views
128
ChrisHirst
ChrisHirst
antonyx6666
  • Locked
  • Question
background image as page width
Replies
3
Views
121
antonyx6666
antonyx6666

Part and Inventory Search

Sponsor

Back
Top