Css background image в другой папке из css

my css находится в assets/css/style.css, а мое изображение находится в assets/img/bg.png Но когда я пытаюсь связать фоновое изображение:

background: url(../img/bg.png);

вместо этого использует assets/css/../img/bg.png в качестве URL-адреса. Почему?

Ответ 1

Html файл (/index.html)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
     <link rel="stylesheet" media="screen" href="assets/css/style.css" />
</head>
<body>
     <h1>Background Image</h1>
</body>
</html>

Файл Css (/assets/css/style.css)

body{
    background:url(../img/bg.jpg);  
}

Ответ 2

вы можете использовать этот

body{ background-image: url('../img/bg.png'); }

Я пробовал это в своем проекте, где мне нужно установить фоновое изображение div, поэтому я использовал это, и он сработает!

Ответ 3

Поскольку вы предоставляете относительный путь к изображению, местоположение изображения просматривается из местоположения, в котором у вас есть файл css. Поэтому, если у вас есть изображение в другом месте в файле css, вы можете либо попытаться указать абсолютный URL (путь, начиная с корневой папки), либо указать относительный путь к файлу. В вашем случае, поскольку img и css находятся в ресурсах папки для перехода из местоположения файла css в файл img, вы можете использовать оператор "..", чтобы указать, что браузер должен переместить 1 папку назад, а затем следовать по пути, который у вас есть. после оператора "..". Это в основном то, как работает относительный путь, и вы можете использовать его для доступа к ресурсам в разных папках. Надеюсь, что это поможет.

Ответ 4

Вы используете систему кэширования. Вы можете изменить исходный файл и очистить кеш, чтобы показывать обновления.

Ответ 5

Вы используете относительный путь. Вы должны использовать абсолютный путь, url (/assets/css/style.css).