Wie kann ich ein Hintergrundbild bei einer CSS Datei "hochladen"?

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet
regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, CSS
21.05.2021, 06:26

Ich kann dir ein Beispiel geben, wie man ein Hintergrundbild für eine Webseite mit Hilfe einer CSS-Datei setzt.

HTML:

<!doctype html>
<head>
  <title>Example</title>
  <meta charset="utf-8">
  <link href="css/style.css" rel="stylesheet">
</head>
<body>
  <p>Some content ...</p>
</body>

CSS:

body {
  background-image: url('../images/your-image.jpg');
}

Wenn es sich um ein dunkles Hintergrundbild handelt, wäre es zudem noch praktisch, eine Hintergrundfarbe als Fallback zu setzen (falls das Bild selbst nicht geladen werden kann):

Beispiel:

body {
  background: black url('../images/your-image.jpg');
}

Für weitere Eigenschaften, die den Hintergrund beschreiben, kannst du in der MDN-Dokumentation nachschlagen.

Dateistruktur:

index.html
css
  style.css
images
  your-image.jpg

Achte bei den Pfadangaben auf Groß- und Kleinschreibung. Auf einem Windows OS mag sie egal sein, auf einem Linux-System wiederum nicht.

Wenn ein Bild wider Erwarten nicht geladen wird, wäre der erstbeste Ansatz, auf der Webseite die Browserkonsole zu öffnen, um zu schauen, ob eine Ressource nicht gefunden werden konnte (möglicherweise die CSS-Datei, möglicherweise das Bild). Es kann bspw. an einer falschen Pfadangabe oder fehlenden Zugriffsrechten liegen. Auch invalides CSS oder HTML kann problematisch wirken. Nutze die Validator-Services, die der W3C für HTML und CSS zur Verfügung stellt.
TechPech1984
Nutzer, der sehr aktiv auf gutefrage ist
im Thema Computer
20.05.2021, 23:22

hä ?

ein hintergrund bild bei deiner CSS hochladen ?

also ich lade ein bild auf den Server und trage dann den Pfad in der CSS datei ein .

es sind ja dateien wie jede andere datei auch .