"Transparent" div not possible in IE - "background-attachment: fixed" not properly rendered

GuyBrush Treepwood · Mar 29, 2005

I got this link in this newsgroup to show me how a div can be "transparent".
But as stated on the site, IE doesn't render this properly because it
doesn't follow the standard.
I personally don't care for Microsoft or IE,
but making a website that the most people can't see as it is supposed to
be seen, is not very user-friendly.
Is there a workaround to have the same effect in IE?

GuyBrush Treepwood · Mar 29, 2005

I got this link in this newsgroup to show me how a div can be "transparent".
But as stated on the site, IE doesn't render this properly because it
doesn't follow the standard.
I personally don't care for Microsoft or IE,
but making a website that the most people can't see as it is supposed to
be seen, is not very user-friendly.
Is there a workaround to have the same effect in IE?

Sorry, here's the link:
http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html

Mark Parnell · Mar 29, 2005

Previously in alt.html said:
I got this link in this newsgroup to show me how a div can be "transparent".

Is there a workaround to have the same effect in IE?

I assume from the subject line that you are talking about the
background-attachment: fixed; property, though you didn't mention it in
your actual message.

Anyway, it's amazing what a little googling will turn up:

http://www.howtocreate.co.uk/fixedBackground.html
http://www.pageresource.com/html/fixedbg.htm

Neither are ideal solutions, but they're probably about the best you're
going to get until IE7 (if you're lucky).

mscir · Mar 29, 2005

This works in my IE 6, Netscape 7.2, Firefox 1.0.1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Opacity</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<style type="text/css">
body{
width: 100%;
height: 100%;
color: #000000;
background-color: #FFFFFF;
}
#menu{
margin: 5px;
display: block;
width: 160px;
top: 180px;
left: 9px;
opacity: .1; /* these 2 lines control opacity: they work
in IE, NN, Firefox */
filter: alpha(opacity=10); /* make sure the numbers agree, e.g. .7
corresponds to 70% */
color: #000000;
background-color: #FFFFFF;
border: 1px solid black;
padding: 10px;
}
</style>
</head>

<body>
<div id='menu'>
This is the Opaque Div
</div>
</body>
</html>

Toby Inkster · Mar 29, 2005

mscir said:
opacity: .1; /* these 2 lines control opacity: they work
in IE, NN, Firefox */

Well, that one works in recent versions of Gecko, but it's part of CSS 3,
so not widely implemented yet.

filter: alpha(opacity=10); /* make sure the numbers agree, e.g. .7
corresponds to 70% */

And this one is a proprietry CSS extension from MS.

If you're just looking for a translucent *background*, then try:
http://examples.tobyinkster.co.uk/translucency/

If you're after a translucent background *and* *foreground*, then try
mscir's suggestion, but also look into the "-khtml-opacity" property for
Konqueror and Safari support.

fixed background-attachment in Netscape 7	8	May 23, 2004
Background color <div> not within entire section	1	Feb 4, 2008
div width problem in IE	7	May 1, 2008
Datagrid transparent background in IE is blue in Firefox	0	May 10, 2006
First div class=something not showing background or borders (IE only)	3	Oct 14, 2005
Transparent Gif not working in IE	4	Oct 29, 2004
Changing <div> width in IE	2	May 23, 2008
VS2005 web not displaying properly in IE7	3	Dec 27, 2007

"Transparent" div not possible in IE - "background-attachment: fixed" not properly rendered

GuyBrush Treepwood

GuyBrush Treepwood

Mark Parnell

mscir

Toby Inkster

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads