Bilder in CSS einbinden

von: Werner Zenk

Bilder lassen sich mit einer internen oder

externen CSS-Angabe
definieren, zum Beispiel für ein Logo. So muss bei einer Änderung
vom Logo nicht jede einzelne Datei geändert werden.

Hier ein Quelltext für eine Seite:

<style type="text/css">
#robot{
 background-image: url(mrrobot.gif);
 width: 200px;
 height: 130px;
}
</style>

<div id="robot">&thinsp;</div>

   = Adresse und Name vom Bild.
   = Breite vom Bild.
   = Höhe vom Bild.
   = ID vom Bild.

Beispiel:

Mehr über Hintergrundbilder (background-image)
erfahren Sie unter:

Hintergrundbild richtig positionieren
oder

CSS Befehle: Hintergrund

Rahmen für Bilder erstellen - Fehlt ein Rahmen an einem Bild? So schnell fügen Sie einen hinzu.

Und Ihre Meinung? Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?

Zerwas: Bei deinem Tutorial fehlt allerdings die Barrierefreiheit, so, kann ich keine 'alt' oder 'title' Eigenschaft vergeben. bgmnt: Für ein Logo benötigt es kein "alt" oder "title", ist sogar eher hinderlich und störend als hilfreich, daher sollte diese Methode bevorzugt werden. Bringt ja keinen Mehrwert, wenn "Logo von xyz" übermittelt wird, da dies keine Information enthält. FVNSMedia: Es bringt zwar keinen Mehrwert einen Alternativtext anzugeben, ist aber für die valide Umsetzung von Webprojekten von zwingender Erfordernis --> siehe HTML-Standards.
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!