Webseiten fügen normalerweise Bilder mit dem Inline-HTML-Tag „img“ hinzu. Die CSS-Codierung legt normalerweise nicht die Quelle eines Bildes fest, da CSS eher das Design als den Inhalt steuert. CSS unterstützt jedoch Eigenschaften, die bei einfachem HTML nicht möglich sind, z. B. Bildopazität. Wenn Sie beispielsweise möchten, dass ein transparentes Foto Ihrer Unternehmenszentrale auf Ihrer Website-Homepage angezeigt wird, können Sie dies mithilfe von CSS festlegen. CSS-Stile wählen Bildquellen mithilfe der Hintergrundbildeigenschaft aus.

1

Öffnen Sie das Stylesheet Ihrer Website mit Ihrem HTML-Editor oder einem Texteditor.

2

Fügen Sie den folgenden Code in das Blatt ein, um einen neuen Stil zu erstellen:

styledimg {

Hintergrundbild: URL (Pfad); Hintergrundwiederholung: keine Wiederholung; Breite: 10px; Höhe: 20px;

}

3

Ersetzen Sie „Pfad“ durch die URL des Bildes innerhalb der Site. Wenn sich das Bild „building.jpg“ beispielsweise im Ordner „images“ Ihrer Site befindet, ändern Sie den Code in:

styledimg {

Hintergrundbild: URL (/images/building.jpg); Hintergrundwiederholung: keine Wiederholung; Breite: 10px; Höhe: 20px;

}

4

Ersetzen Sie „10“ durch die Breite des Bildes und ersetzen Sie „20“ durch die Höhe des Bildes. Wenn das Bild beispielsweise 200 Pixel hoch und 600 Pixel breit ist, ändern Sie den Code in:

styledimg {

Hintergrundbild: URL (/images/building.jpg); Hintergrundwiederholung: keine Wiederholung; Breite: 600px; Höhe: 200px;

}

5

Öffnen Sie die Webseite, auf der Sie das Bild einfügen möchten.

6

Fügen Sie den folgenden Code hinzu, um das Bild einzufügen: