webentwicklung-frage-antwort-db.com.de

hTML-Div-Hintergrundbild wird nicht angezeigt

Ich arbeite an einer Webseite (ich bin natürlich ein Neuling) und das Hintergrundbild wird nicht im Div angezeigt. Ich habe sowohl Hintergrundbild als auch Hintergrund ausprobiert, und beide werden nicht funktionieren. Hier ist der Code

wenn jemand helfen kann, wäre das toll !!

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
body {background-color:gray;}
</style>
  </head>
<body>
  <div style="background-image: url('/ximages/websiteheader1.png');height:200px;width:1200px;">
  </div>
</body>
</html>
7
duxfox--

Ich empfehle, die CSS aus dem Inline-Bereich zu verschieben Wenn Sie davon ausgehen, dass Ihre PNG-Datei tatsächlich vorhanden ist, setzen Sie die Hintergrundgröße und wiederholen Sie die Tags.

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
body {background-color:gray;}
#mydiv {
   background-image: url('/ximages/websiteheader1.png');
   background-repeat:no-repeat;
   background-size:contain;
   height:200px;width:1200px;
}
</style>
  </head>
<body>
  <div id="mydiv">
  </div>
</body>
</html>

Wenn dies nicht funktioniert, überprüfen Sie in den Entwicklertools Ihres Browsers die Antwortcodes und stellen Sie sicher, dass die URL korrekt ist.

Hoffe das hilft!

12
Yani

Eine schnelle und kleine Lektion über Wege

Absolute Pfade

http://website.com/folder/image.jpg
WENN das Bild nicht in Ihrer Domain ist - dort nach Bild suchen


//website.com/folder/image.jpg
Image geladen mit den Protokollen http oder https 


Relative Pfade

(Für interne Verwendung, wenn sich das Image auf demselben Server befindet.)

/folder/image.jpg
Ähnlich wie bei Absolute Paths, nur das Protokoll und der Domänenname weglassen
Go durchsucht mein Bild ab dem Hauptordner /, dann in folder


image.jpg
image im selben Ordner wie das Dokument, das das Bild aufruft!


folder/image.jpg
Dieses Mal Ordner befindet sich an derselben Stelle wie das Dokument. Gehen Sie in den Unterordner für das Bild.


../folder/image.jpg
Von dem Dokument aus gehen Sie zu one folder back../und gehen Sie infolder


../../folder/image.jpg
go zwei Ordner zurück../../und dann infolder gehen


../../image.jpg
go zwei Ordner zurück, da ist mein Bild!

16
Roko C. Buljan

Für mich war es, weil ich eine Winkelelement-Direktive verwendet habe, um den Hintergrund zu setzen, aber ich vergaß, "display" auf "block" zu setzen. Pfui! Ich habe für immer mit der Fehlersuche verbracht! Wäre es eine Attributanweisung gewesen, wäre ich wahrscheinlich nicht darauf gestoßen.

0
Helzgate

Ich hatte das gleiche Problem. Ich korrigierte den relativen Pfad so, dass er im selben Ordner wie die Seite begann, und es funktionierte:. URL (./images/1.jpg) anstelle von URL (/images/1.jpg) Ich habe irgendwo gelesen, dass es besser ist, dies immer zu tun . Lass mich wissen, ob es funktioniert.

0
freddy

eigentlich ist das gleiche Problem mit mir gegangen. Die Lösung ist hier für dieses Problem. Sie müssen Ihren Pfad ändern background-image: url('/ximages/websiteheader1.png'); TO background-image: url('ximages/websiteheader1.png');

entferne das erste / aus dem Pfad des Bildes.

0
Neeraj saini