web-dev-qa-db-ja.com

CSS背景画像URLパス

CSSを使用してページの背景を使用しようとしています。画像は別のフォルダからのものであり、CSSファイルを参照しようとしています。

CSSファイルのURLは/ var/www/soFit/BOです。

画像ファイルのURL：/ var/www/soFit/BO/images/login

私のCSSファイル：

#login-bg   
{

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

私のHTMLコード：

<!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>

背景画像が表示されないのはなぜですか？

htmlcssimagebackground
10
dasdasd

次のように、イメージURLから先頭のスラッシュを削除します。

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

ブラウザは、先頭のスラッシュを使用して、ドメインのWebルートディレクトリ（たとえば、/var/www/）現在の（CSS）ファイルの場所の代わりに。

17
Mimi

これを試して：

#login-bg   
{

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

ルートの先頭でスラッシュ「/」を使用すると、相対ルートではなく絶対ルートになります。

6
Hoijof

書くだけ

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

/ imagesを記述すると、imagesフォルダがWebサイトのルートディレクトリから来ていることを意味します。この場合、これは正しくありません。

1
Alex