2014-02-27 19 views
10

Hallo Im versuchen, Hintergrund für meine Seite mit CSS verwenden. Das Bild stammt aus einem anderen Ordner und ich versuche, sie auf die CSS-Datei zu verweisen.CSS-Hintergrundbild URL-Pfad

Die CSS-Datei URL lautet:/var/www/Sofit/BO

Die Bilddatei-URL lautet:/var/www/Sofit/BO/images/login

Meine CSS-Datei:

#login-bg 
{ 

    background-image:url('/images/login/login_background.jpg'); 
    font-size: 20px; 
} 

Mein HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<link rel="stylesheet" type="text/css" href="styles.css" /> 

</head> 

<body id="login-bg"> 

<form action="" method="POST"> 

Username: <input type="text" name="username" > 
<br> 
Password: <input type="text" name="password" > 
<br> 
<input type="submit" value="enter"> 

</form> 

</body> 
</html> 

Warum ich mein Hintergrundbild nicht sehen kann?

+1

führenden Schrägstrich ist das Problem. –

+1

Haben Sie es ohne den führenden Schrägstrich versucht? 'background-image: url ('images/login/login_background.jpg');' –

+1

Für zukünftige Referenz, wenn Sie im Netzwerk-Inspektor in den Browser-Entwickler-Tools schauen, können Sie den vollständigen Pfad sehen, den der Browser versucht zu lesen . –

Antwort

17

Entfernen Sie den führenden Schrägstrich von der Bild-URL wie folgt:

#login-bg { 
    background-image:url('images/login/login_background.jpg'); 
    font-size: 20px; 
} 

den führenden Slash Durch die Verwendung versucht Browser das Bild aus dem Web-Root-Verzeichnis der Domäne zu laden (zB /var/www/) anstelle des aktuellen Dateistandorts (CSS).

+3

Sie sollten wahrscheinlich erklären, warum es das Problem ist. Der Schrägstrich weist den Browser an, nach einem Verzeichnis auf der gleichen Ebene wie das aktuelle Verzeichnis zu suchen. Durch das Entfernen des Schrägstrichs wird der Browser angewiesen, im aktuellen Verzeichnis nach einem Verzeichnis für die Datei zu suchen. –

+0

@KyleShevlin Absolut, ich habe den Post bearbeitet :) Danke trotzdem. – Mimi

+0

@dasdasd Nicht erwähnen :) – Mimi

6

Try this:

#login-bg 
{ 

    background-image:url('images/login/login_background.jpg'); 
    font-size: 20px; 
} 

Mit dem Schrägstrich ‚/‘ am Anfang der Strecke ist es eine absolute Strecke, nicht eine relative Strecke, das ist, was Sie wollen.

+0

Technisch wäre die korrekte Syntax ein führender Punkt-Schrägstrich './Images/login/login_background.jpg'' – Misunderstood

+0

@Missverstanden der Punkt zur Darstellung des aktuellen Verzeichnisses ist eine Unix-Sache. Ich bin mir nicht einmal sicher, ob das Teil der URI-Spezifikation ist. – devios1

+0

Ich stehe korrigiert, es ist in der Tat Teil der URI-Spezifikation. Allerdings ist es technisch gleichbedeutend damit, keinen führenden Schrägstrich zu haben, also ist es technisch nicht mehr "korrekt" und tatsächlich ist es im Web so unklar, dass ich es empfehlen würde, es zu vermeiden. – devios1

1

schreiben gerade

background-image:url('images/login/login_background.jpg'); 

, wenn Sie/Bilder schreiben bedeutet es, Bilder-Ordner aus dem Stammverzeichnis der Website kommt. was in diesem Fall nicht stimmt.