CSS Hintergrund-Bild Pfadprobleme

Question

In unter meinen CSS Ich habe folgendes:

#framecontentTop{ 
position: absolute; 
top: 0; 
left: 120px; 
right: 0; 
height: 100px; 
overflow: hidden; 
background-image: url(/Users/myname/Website Project/logo.jpg); 
color: white; 
}

Wo der Pfad zu dem Bild, das ich als das Hintergrundbild verwenden möchten, ist/Users/myname/Website Project/Logo .jpg

Wenn ich jedoch mein div mit der ID framecontentTop einfüge, wird das Bild (oder gar nichts) als Hintergrund nicht angezeigt. Es gibt keine anderen divs im CSS, die Konflikte verursachen, und wenn ich den Hintergrund für framcontentTop auf eine Farbe festlege oder als Bild belasse, aber die URL als zufälliges Bild online lege, lädt sie es gut. Also kann ich nur davon ausgehen, dass das Problem darin liegt, wie ich den Weg zum Bild angegeben habe - kann jemand sehen, was ich hier falsch gemacht habe?

Vielen Dank

Answer 1

Wenn Sie keine Sonderzeichen haben, sollten sie maskiert werden, oder im Fall von white-space, zumindest zitiert, wie dies :

background-image: url("/Users/myname/Website Project/logo.jpg"); 

Sie können die W3C Spec für die vollen Anforderungen sehen.

Einige Zeichen in einem nicht notierten URI, wie Klammern, Komma, Leerzeichen, Apostrophe (') und doppelte Anführungszeichen (") erscheint, müssen mit einem Backslash geschützt werden, so dass der resultierende Wert URI a URI-Token:. '(', ')', '\'

Answer 2

Sie verwenden einen absoluten Pfad, der immer auf die gleiche URL auf dem Server behoben wird. Wenn das funktioniert, wenn Sie es in Element A einfügen, aber nicht in Element B, besteht das Problem wahrscheinlich nicht in der URL, sondern in einer anderen background oder background-image Einstellung.

Ich würde Firebugs "Inspect Element" -Funktion verwenden, um herauszufinden, ob eine andere Hintergrundeinstellung Vorrang hat.

URLs mit Leerzeichen sollte immer von der Art und Weise in Anführungszeichen gesetzt werden:

background-image: url("/Users/myname/Website Project/logo.jpg");