¿Quieres registrarte?

Cómo poner el fondo transparente de un iframe

Por: El Oso Amoroso
10 de Junio del 2008
18,406 visitas
css

Los iframes no son una técnica recomendada en Cristalab, pues muchas veces, es preferible, para cumplir el mismo cometido, usar AJAX (más aquí).

Dicho esto, hay que reconocer que los Iframes cumplen muy adecuadamente para ciertos requisitos, y en ocasiones son necesarios.
Discernir cuándo hay que usar uno, y cuándo otro, no es objeto de este tip.

Esta vez hablaremos sobre:

Cómo poner fondo transparente a un IFRAME.


Para Firefox:
iframe {background-color:transparent;}
(en la página que contiene el IFRAME:)

Para Ópera:
body {background-color:transparent;}
(en la página a la que refiere el IFRAME:)

Para IE:
No tiene solución (como siempre) mediante CSS con código W3C, sino que, además de emplear la solución de "Opera", hay que usar código propietario:
<iframe allowtransparency="allowtransparency" src="..." ></iframe>
(en el código del IFRAME:)
body {background-color:transparent;}
(en la página a la que refiere el IFRAME:)

Para FireFox + Opera + Internet Explorer
Tan fácil como juntar las tres acciones.
Abajo, un ejemplo:
Código página CONTENEDOR.html
<html>
<head>
<style>
body {background-color:#DDD; background-image:url('http://url.ie/fiv');}
iframe {background-color:transparent;} /* fondo transparente Opera */
</style>
</head>
<body>
<iframe allowtransparency="allowtransparency" src="INTERIOR.html" ></iframe>
<!-- fondo transparente IExplorer //-->
</body>
</html>

Código página INTERIOR.html
<html>
<head>
<style>
body {background-color:transparent;} /* fondo transparente FireFox */
</style>
</head>
<body>
<!-- interior del Iframe //-->
</body>
</html>

Enviar a twitter Enviar a facebook


También te interesa


Etiquetas css

Comentarios | Enviar un comentario
Muy bueno aunque reconozco que he estado obligado a utilizar iframe siempre he necesitado dejarlo transparente para no afectar el diseño y el background


saludos
Por: Linker - Pixmedial-blog
Excelente muchas gracias por compartir este tip.

Ya estaba empezando a insultar porque firefox3 muestra por defecto el background transparente e IE lo muestra en blanco.

De nuevo muchas gracias ^^
Por: Eduardo-blog
Gracias!!!!!!!!!!!

Ya me estaba empezando a volver loca, te debo mi cordura :P
Por: Ayalga-blog
Hola:
he leido este tip y la verdad es que es bueno. Lo malo es que a mí no me funciona con IE7. ¿Tiene que ver algo la versión?¿Influye el hecho de verlo en modo local?¿Influye el meter el iframe en algún tipo de contenedor tipo capa, o celda?
Gracias y saludos.
Por: a mi no me funciona !!!-b
Gracias compadre!
Por: Francisco-blog

a mi no me funciona !!!-b :

Hola:
he leido este tip y la verdad es que es bueno. Lo malo es que a mí no me funciona con IE7. ¿Tiene que ver algo la versión?¿Influye el hecho de verlo en modo local?¿Influye el meter el iframe en algún tipo de contenedor tipo capa, o celda?
Gracias y saludos.
Tal y como está en el ejemplo, funciona bien en IE7
Por: El Oso Amoroso
no funciona en IE7 :(
Por: Vale-blog
Claro que funciona en IE7.


(click para ampliar)
Por: El Oso Amoroso
hola.. hablando de iframe quisiera poner un iframe encima de otro iframe y me explico... tengo un iframe dentro de mi pagina con una pelicula shockwave que cuando las personas le dan clic los envia a otra direccion y quiero poner otro iframe con una imagen transparente que si dan clic los envie a una direccion q yo quiero q vallan o q porlomenos bloquee el clic....

es esto posible???

me pueden enviar comentarios info@internetnets.com y pueden ver mi problema en [url]www.787internet.com/tv[url]

Gracias...
Por: Internet Nets-blog
La verdad que el san google nunca se equiboca con las primeras opciones, despues de aver terminado de diseñar, al mirar en mozila todo ok! como yo queria, despues me acorde que mi cliente.... usa IE.... al probarlo se me vino el mundo abajo, pero gracias a este blog, y a sus administradores, y sus aportadores, solucionados.

SALUDOS.
Por: mariano-blog
ta
Por: tara-blog
Excelente! Gracias!
Por: Claudia-blog
perfecto no acostumbro dejar comentarios pero este codigo que cayo como anillo al dedo muchas gracias me sirvio de maravilla
Por: Ram Diablo-blog
Muchas Gracias.
Por: Real-blog
mil gracias. con esto solucione lo q queria hacer con mi pagina web
Por: thehunter-blog
funca pero no es validado por la W3C
Asi q por las huevax es
Por: muerto de la basura-blog
uffff......gracias por esto, en verdad me ayudaron reguero,no es aceptado por la W3C pero funcionaala perfeccion
Por: Gustavo Leon-blog
ola

pues si esta prefectoo

graziaz por la ayuda
Por: ale-blog
jajajajajaja estoy de acuerdo con aSADASFSDFSDFfdsgr jajajaja no funciona el Hp... pero gracias por el aporte...

en Explorer 7.0 no me funciona
Por: Rck_Roll-blog
Gracias!! totalES
Por: Osmosi-blog
Hola no me funciona el codigo... no se porque, con quien me podría contactar para q me ayude.¿?

gracias

mi mail es efedf08@gmail.com
Por: -eFe--blog
empezaba a enloquecer! me funcionó perfecto MUCHAS GRACIAS! =D
Por: GABRIELA MARACAY-blog
quisiera por favor me ayudar en es codigo de fondo mediante css, convertir un poco mas opaca el fondo, pero q cuando escriba encima de la pueda, pueda verse mas claro las letras, gracias
<HTML>
<HEAD>
<style type="text/css">
Body {
background-image: url('hola.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;

</style>


<HEAD>
<BODY>
Por: ccenta
Mil gracias, me sirvio el aporte...
Por: TLo-blog
yo solo con agregar esto al body me reultó
(body { background:none;
Por: Pepe-blog
en IE funciona, solo si aparte de lo mencionado en el blog, se declara el SRC, del iframe, ejemplo (SRC="mipagina.html") si el SRC es necesario cargarlo en forma dinámica, NO FUNCIONA, la solución o emparchado, es apuntar el SRC en la declaración el iframe a un html en blanco o de body vacio(ejemplo SRC="blanco.html")y luego dinámicamente cargar el html que necesitamos mostrar en el marco.
Por: luis-blog
Muchas gracias por compartir este tutorial! Realmente me fue de muchisima utilidad! Saludos!
Por: Diego Cruz-blog
Te lo agradezco mucho, me sirvió bastante, no se ustedes pero siempre IE hace que explote mis sitios.
Por: KingDuck-blog
Deja un comentario
IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.