Wie gebe ich den Hintergrundbildpfad in CSS an?

74

Meine CSS-Datei befindet sich in:

Project / Web / Support / Styles / file.css

Mein Bild ist in:

Project / Web / images / image.png

Ich möchte dieses Bild in meiner CSS-Datei.

Ich habe versucht :

1) background-image: url(/images/image.png);
2) background-image: url('/images/image.png');
3) background-image: url("/images/image.png");
4) background-image: url(../images/image.png);
5) background-image: url('../images/image.png');
6) background-image: url("../images/image.png");

Aber. Ich bekomme dieses Bild nicht auf meiner Seite.

Wie kann der Pfad der Bilddatei in der CSS-Datei korrekt angegeben werden?

html css Job in
quelle
Ändern Sie es in Firebug / Chrome und sehen Sie, welches Bild zeigt
Murali Murugesan
Dies könnte helfen ... ( stackoverflow.com/questions/4862231/… )
zik
Sie sollten versuchen, relative Pfade nach Möglichkeit zu vermeiden, und stattdessen einen absoluten Pfad verwenden.
AfromanJ
Es wird in einer JSP-Datei verwendet.
Jobin
Die Verwendung des absoluten Pfads weist einige Einschränkungen auf. Deshalb habe ich mich für einen relativen Weg entschieden.
Jobin

Antworten:

163

Ihr CSS ist hier: Project / Web / Support / Styles / file.css

1 Mal ../bedeutet Projekt / Web / Support und 2 Mal ../ dh ../../bedeutet Projekt / Web

Versuchen:

background-image: url('../../images/image.png');
Hiral
quelle
1
Ja richtig. Ebenso würden Sie, wenn Sie geben ././, die gleiche Lösung erhalten. - @ Hiral
Nitesh
1
Der Pfad ist also relativ zum aktuellen CSS und nicht zum HTML-Code, in dem das CSS enthalten ist, oder?
KNU
Frage: ../ bedeutet zurück zurück zurück? Deshalb sind wir bei Project / Web / Support, werden aber nicht ../../ bedeutet, dass nur wir bei Project sind. Dann sollte der Code nicht Hintergrundbild sein: url ('../../ Web / images / image.png'); ? Ich kann es nicht verstehen, bitte erklären Sie es. @ Hiral
Harshal Sharma
@HarshalSharma müssen wir unter / Project / Web erreichen. 1 Mal ../ -> / Project / Web? Support und 2 Mal ../ dh ../../ bringen uns zu / Project / Web. Ich hoffe es ist jetzt klar.
Hiral
1
@ Hiral ok, wir zählen nicht file.css. ../ => Projekt / Web / Support und ../../ bedeutet / Projekt / Web. Ein ../ bringt Ihnen also ein Verzeichnis zurück. ist es das?
Harshal Sharma
14

Es gibt zwei grundlegende Möglichkeiten:

url(../../images/image.png)

oder

url(/Web/images/image.png)

Ich bevorzuge letzteres, da es einfacher ist, mit allen Standorten auf der Site zu arbeiten und von dort aus zu arbeiten (daher auch für Inline-Bildpfade nützlich).

Wohlgemerkt, ich würde nicht so viel tiefes Verschachteln von Ordnern machen. Es scheint unnötig und macht das Leben ein bisschen schwierig, wie Sie gefunden haben.

ralph.m
quelle
6

Verwenden Sie die folgenden.

background-image: url("././images/image.png");

Das soll funktionieren.

Nitesh
quelle
8
.verweist auf den aktuellen Ordner, ..verweist auf das übergeordnete Verzeichnis und dieses sollte verwendet werden.
Adrian Ber
Die Ebene besagt, dass Sie darauf abzielen ././, um zum übergeordneten Ordner zu gelangen. Versuch es selber. - @AdrianBer
Nitesh
4

Sie müssen 2 Ordner aus Ihrer CSS-Datei zurückholen.

Versuchen:

background-image: url("../../images/image.png");
UnderTheSea
quelle
1

Sie können auch Inline-CSS hinzufügen, um ein Bild als Hintergrund hinzuzufügen (siehe Beispiel unten)

<div class="item active" style="background-image: url(../../foo.png);">
Yogesh
quelle
0

Die Lösung ( http://expressjs.com/en/starter/static-files.html ).

Sobald dies geschehen ist, soll der Bildordner es nicht mehr ablegen. nur sein

Hintergrundbild: URL ("/ image.png");

carpera, dass das Bild bereits in den statischen Dateien ist

Lypef
quelle