There is no attribute "allowtransparency"

html css w3c w3c-validation

60,080

Solution 1

While it's true that the W3C's HTML spec does not define it, there is an allowTransparency attribute, and it is supported by all modern browsers (and Internet Explorer). As HTML5 has taught us, the cart is supposed to be before the horse.

Suppose you have this HTML on your main page, index.html:

<html>
    <body>
        <iframe src="source.html" 
                allowTransparency="true" 
                style="background-color:lightgreen;" 
                width="400" height="200">
        </iframe>
    </body>
</html>

And your source.html looks like this:

<html>
    <body>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, magna
           id bibendum sollicitudin, tellus tortor consequat enim, et mollis mauris 
           augue et dui. </p>
    </body>
</html>

When you open the main page (index.html) in your browser, you will see the text from source.html in an iframe, but it will have a light green background.

(Tested with Safari, Firefox, and Chrome on Mac OS X and Internet Explorer 8 and Chrome on Windows XP)

Edit: The key is this: The source page cannot set its own background. If it does, it ignores the transparent background.

Update: Just tested this (March 2019) using Safari 12, Chrome 73, and Firefox 65 on macOS High Sierra, and it still works.

Solution 2

I'm not sure what you're trying to do here, but this should be what you are looking for:

iframe {
    background-color: transparent;
}

This is, of course, assuming that you want the background to the iframe be transparent.

Solution 3

There's a way you can do this with jQuery if you have included the jQuery file -

<!--[if lt IE 9]><script> $(".classname").attr("allowTransparency", "true"); </script><![endif]-->

Change .classname to that of your iframe or make one if there isn't one. (Take out the attribute from the iframe as well) Put that straight after the iframe closing tag and it adds in the required allowTransparency tag for browsers prior to IE9. As it is within the IE conditional statement, it is not read by the W3C validator. It also eliminates cross browser compatibility and content hiding issues with adding all the CSS that people have already mentioned, if you're using the latest jQuery version anyway. The allowTransparency attribute was created with a clearly defined purpose, so there's no point trying to recreate it with CSS when you can just silently insert it. Hope this helps someone!

(This method assumes you already haveiframe {background-color:transparent}which doesn't work on older IE versions)

Solution 4

There is no HTML attribute named transparency, so you will always get an error with iframe transparency=true
if you set opacity to zero, you won't see the element at all - you need to define the degree of opacity:
```
opacity: 0.25; /* all modern browsers */
filter: alpha(opacity=25) /* IE */
```

The above CSS (note: opacity values are 0-100 for IE, 0-1 for other browsers) will allow other elements behind (e.g. a page background image) to show through, even if the element with the opacity setting has a coloured background.

For more control over transparency, see RGBA (A = alpha), but watch out for variable browser support.

Solution 5

First, there is no such thing as 'transparency="true"', so that won't work.

Second, are you trying to make the background transparent or the entire iframe transparent?

The CSS Opacity property makes everything inside whatever element you use it on transparent. Opacity scales from 0 to 1, where 0 is completely see-through, 0.5 is half transparent, and 1 is completely visible.

If you use this on a div or an iframe (or anything) the background and the text will all be equally faded.

On the other hand, in every modern browser you can set the backround to be partially transparent using RGBA color. You should do it like this:

iframe.transparent {
    background-color: #FFF; /*this gives a background color for browsers that can't do RGBA color, like internet explorer*/
    background-color: rgba(255,255,255,0.5);
}

The RGBA color definition works just like the opacity attribute (0 = clear, 1 = solid), except it only makes the specific item you set it on transparent and does not affect the items inside that item (ie it does not affect the text inside your iframe). The first three numbers are the red, green, and blue values of your color on a scale from 0 to 255.

If you want a better cross-browser solution, though, I'd recommend just using a transparent .png file as a background image. You'll have to test this on IE, not sure if it will work for an iframe specifically, but you could set no background on the iframe and then set the transparent image as the background of the page you load inside the iframe (apply it to the body element for that page).

Hope this helps!

View more solutions

60,080

Author by

Bharanikumar

technical link click pannu pa Try pannunga

Updated on March 20, 2020

Comments

Bharanikumar about 4 years
I am looking for some alternate way to do:
```
<iframe transparency=true   ...
```
When I do the W3C validation, I am getting the error:
```
Column 31: there is no attribute "allowtransparency"
```
If use this CSS,
```
.iframe-trans-fix{
   opacity: 0;
   filter:alpha(opacity=0);
}
```
for the above snippet I am getting a blank iframe.
Bharanikumar over 13 years

in IE , my iframe goes transparent , but the thing is i cant able to see my content inside the iframe also..
Dave Everitt over 13 years

Can you put up up a sample page? If the iframe's content is totally invisible, then I'd guess (without seeing) that either: it's not getting the iframe content, the content is inheriting another CSS setting, or (obvious, but worth checking) it's color property is the same as the background-color. Set it's color to red, and remove the opacity rule - does it still fail to appear?
Bharanikumar over 13 years

this is changes, as per you above sample, <style type="text/css"> /*.test-frame{ /*opacity: 0.25; /* all modern browsers / /*filter: alpha(opacity=20); / IE */ /*opacity: 0.25; filter: alpha(opacity=0); }*/ iframe.transparent { background-color: #000000; /*this gives a background color for browsers that can't do RGBA color, like internet explorer*/ background-color: rgba(0,0,0,0.5); } </style> <body bgcolor="#000000"> <iframe class="test-frame" src="after-date.php"> THIS IS IFRAME AREA</iframe> but still no update, in IE my ifram is white but site is black BG
Andrew over 13 years

Can you share a link to the page you're working on so I can take a look at the entire code?
Arne Evertsson over 12 years

+1 for actually trying to provide an alternate way, which was requested. I haven't really tried it though.
tomg over 12 years

There's no need to involve jQuery here. This suffices: document.getElementById("yourframeid").allowTransparency = true;
David Waters over 11 years

This attribute may not be as widely used as you think, did you see if it actually changed behavior on browsers other then IE? As far as I can tell this is an IE specific attribute and the other browsers default to allowing transparency on iframes and just ignore this attribute.
james.garriss over 11 years

Reread my answer. The answer to your question is already there.
Joe H over 10 years

To self-quote "if you have it installed". I didn't state you had to install it just to do this. If you haven't, then I agree your way would be better.
PhistucK almost 10 years

@james.garriss I read you answer and you specifically write that all of the browsers support the attribute, not its functionality. Non Internet Explorer browsers behave like Internet Explorer (8 and below, apparently) behaves (when the attribute is set for it) even when the attribute is not set for them. Chrome does not seem to support the DOM property. What exactly do you think it supports?
james.garriss almost 10 years

I really don't understand what you're asking. Did you try running the code I provided? This code demonstrates that these browsers support transparency (or at least they did when I test them 3 years ago). Try the code for yourself.