You are here: Reference > JavaScript > client-side > HTML DOM > properties > allowTransparency (frame, iframe)

allowTransparency property (frame, iframe)

Browser support:
Sets or retrieves whether a frame element (frame or iframe) can be transparent.
The support for the allowTransparency property has been removed in Internet Explorer 9.
Transparency is allowed by default for linked documents in all commonly used browsers, except in Internet Explorer before version 9. If the allowTransparency property is not specified, the linked document cannot be transparent. If the allowTransparency property is set, the linked document can be transparent and it will be transparent by default (see backgroundColor).


You can find the related objects in the Supported by objects section below.
This property is read/write.
HTML page for this property: ALLOWTRANSPARENCY

Possible values:

Boolean that indicates whether the element can be transparent.
One of the following values:
Default. Object cannot be transparent.
Object is transparent.
Default: false.

Example HTML code 1:

This example illustrates the use of the ALLOWTRANSPARENCY attribute:
<body style="background:#EFEFFF">
    <iframe src="transparent.htm" allowtransparency="allowtransparency">
Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the allowTransparency property:
    <script type="text/javascript">
        function ToggleTrans () {
            var frame = document.getElementById ("myFrame");
            if ('allowTransparency' in frame) {
                frame.allowTransparency = !frame.allowTransparency;
            } else {
                alert ("Your browser doesn't support this example!");
<body style="background:#EFEFFF">
    <!-- in the transparent.htm file must be set style="background-color: transparent" for the BODY element. 
            <body style="background-color: transparent">    -->

    <iframe id="myFrame" src="transparent.htm" allowtransparency="allowtransparency">
    <button onclick="ToggleTrans ();">Change transparency!</button>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content