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

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