Inhaltsbereich
Sie befinden sich hier: Barrierearm » Befehle » Hintergrundfoto
Untertitel zum Foto Peter Mages an der Kieler Förde (Strande) im März 2011 © Margarete Voelzke.
Hintergrundfoto (background–image)
Codierungsbeispiel für ein "Hintergrundfoto" in der Kopfzeile einer Internetseite. Als Beispiel wähle ich die Seite Saloniki (Griechenland), aus den Referenzen.
Das Foto hat eine Breite von 1596 Pixel. Beim Skalieren passt sich das Foto dem Bildschirm an. Bei großer Auflösung wird ein größerer Auschnitt des Fotos angezeigt. Bei kleiner Auflösung ein kleinerer Ausschnitt. Ist die Auflösung jedoch breiter als das Fotos, also mehr als 1596 Pixel, dann kachelt das Foto. Das heißt, der linke Anfang des Fotos erscheint erneut am rechten Ende.
CSS (Cascading Style Sheets)
#kopf {
margin:0;
padding:0;
background: url(../exclude/hintergrund_niki01b.jpg) repeat #fff;
color:#000;
height:130px;
}
XHTML (Extensible Hypertext Markup Language)
<div id="kopf">
<span class="versteck">Das Hintergrundfoto zwischen den beiden Navigationen zeigt die Hafenpromenade von Saloniki im März 2009 <span lang="en" xml:lang="en">Copyright</span> Margarete Voelzke.</span>
</div>
Das Foto erscheint nicht im Quellcode, da es über die CSS geladen wird. Für Hilfsmittelnutzer wird ein unsichtbarer Text hinzugefügt, mit kurzer Erläuterung des Fotos (<span class="versteck">).
Bildschirmausdruck
Bildschirmausdruck für "Hintergrundfoto".
Weitere Befehle zu:
Adresse von Peter Mages
Peter MagesGraefestr. 19
10967 Berlin
Telefon: 0 30 – 6 94 57 22
E–Mail: peter@mages-online.de
Internet: www.mages-online.de
[ nach oben ] · zum Seitenanfang ·
