I det här exemplet är IFRAME centrerad på sidan både vertikalt och horisontellt. Det är gjort genom att lägga IFRAME i en tabell där det angivits att bredd och höjd på tabellen ska vara 100% och cellens innehåll ska vara centrerat:
<body>
<table width="100%" height="100%" border="0">
<tr>
<td align="center" valign="middle">
<iframe src="iframe-text.php"
width="400" height="400" scrolling="auto" frameborder="0"></iframe>
</td>
</tr>
</table>
Det här exemplet visar att det då går att anpassa en ram över en bakgrundsbild utan att behöva dela upp bakgrundsbilden som i traditionella ramar/frames. För att bakgrundsbilden också ska vara centrerad och aldrig upprepas i bredd- eller höjdled används CSS för att ge bakgrundsbilden egenskaperna no-repeat och position: center. Exemplet nedan visar koden för denna sida:
<head>
<style type="text/css">
<!--
body {
background-image: url(bakgrund.jpg);
background-repeat: no-repeat;
background-position: center center;
}
-->
</style>
</head>
...och slutligen lite brödtext för att fylla ut IFRAME så att du får scrolla i den:
En IFRAME (Inline Floating Frames) är en ram som är oberoende av webbläsarens fönster avseende storlek och placering. Ett vanligt frameset består ju av två eller flera ramar som storleksmässigt anges i pixlar, procent eller andel förhållande till fönsterstorleken. Läs mer om Frames/Ramar här ». En IFRAME placeras i ett dokument men visar liksom Frames/Ramar innehållet i ett annat källdokument. Den sida som ska visas i IFRAME är alltså en annan HTML-sida som du förberett och sparat tidigare.
IFRAME kan placeras överlappande och kan ha även ha en transparent bakgrund. OBS! Även om IFRAME är standard från och med HTML 4 (läs mer på www.w3c.org) så är stödet begränsat i andra webbläsare än Internet Explorer. Överlappande IFRAME använder attributet z-index vilket stöds av IE 4 när det gäller Lager (layers). Z-index för IFRAME stöds däremot bara av IE 5.5 och senare versioner. Om webbläsaren inte stöder IFRAME visas inget innehåll alls!