CSS – IFRAME – mit Hintergrundgrafik – Beispiel 4:
Um ein Hintergrundbild in unseren IFRAME einzubinden, müssen wir zunächst mit einem Bildbearbeitungsprogramm ein Hintergrundbild erstellen. Dieses Bild sollte in dieser Übung genau die Grösse unseres IFRAMES haben also 200×200 Pixel. Das Gif wird nun in den Ordner images mit dem Dateinamen background.gif abgespeichert. Nun zum Code der extern ausgelagerten CSS Datei:
#iframe_3 { background-image: url(images/background.gif); scrollbar-arrow-color: #000066; /* dunkelblau*/ scrollbar-face-color: #FFFFFF; /* weiss*/ scrollbar-highlight-color: #5AE100; /* grün*/ scrollbar-3dlight-color: #FF9900; /* orange*/ scrollbar-shadow-color: #FF0000; /* rot*/ scrollbar-darkshadow-color: #000000; /* schwarz*/ scrollbar-track-color: #cedcff; /* hellblau*/ text-align: justify; width: 200px; height: 200px; background: #CCCCCC; .abstand_iframe{ padding: 10px; } .scrollbereich { overflow: auto; width: 180px; height: 180px; } .scrollbarabstand{ padding-right: 20px; }
Entsprechend ändern wir unseren HTML CODE wie folgt:
<div id="iframe_3"> <div> <div> <div> Hier der Beispiel - Text, dieser sollte von den Zeilen her länger sein als das Iframe selbst (in unserem Fall 200 Pixel), damit wir den Scrollbalken erkennen können. Haben wir zu wenig Text eingegeben, verschwindet unser im IE eingefärbter Scrollbalken und wir sehen unseren Text auf einem von uns erstellten Hintergrundbild, dass wir in den Ordner..... </div> </div> </div> </div>