my css is in assets/css/style.css and my image is in assets/img/bg.png But when i try to link the background image:
我的css在assets / css / style.css中,我的图片在assets / img / bg.png但是当我尝试链接背景图片时:
background: url(../img/bg.png);
it instead uses assets/css/../img/bg.png as the url. Why is it?
它使用assets / css /../ img / bg.png作为url。为什么?
6 个解决方案
#1
15
Html file (/index.html)
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 file (/assets/css/style.css)
Css文件(/assets/css/style.css)
body{
background:url(../img/bg.jpg);
}
#2
1
For mac OS you should use this :
对于mac OS,你应该使用这个:
body {
background: url(../../img/bg.png);
}
#3
0
you can use this
body{ background-image: url('../img/bg.png'); }
body {background-image:url('../ img / bg.png'); }
I tried this on my project where I need to set the background image of a div so I used this and it worked!
我在我的项目中尝试了这个,我需要设置div的背景图像,所以我使用它并且它有效!
#4
-1
Since you are providing a relative pathway to the image, the image location is looked for from the location in which you have the css file. So if you have the image in a different location to the css file you could either try giving the absolute URL(pathway starting from the root folder) or give the relative file location path. In your case since img and css are in the folder assets to move from location of css file to the img file, you can use '..' operator to refer that the browser has to move 1 folder back and then follow the pathway you have after the '..' operator. This is basically how relative pathway works and you can use it to access resoures in different folders. Hope it helps.
由于您要提供图像的相对路径,因此将从您拥有css文件的位置查找图像位置。因此,如果您将图像放在与css文件不同的位置,您可以尝试提供绝对URL(从根文件夹开始的路径)或给出相对文件位置路径。在你的情况下,因为img和css在文件夹资源中从css文件的位置移动到img文件,你可以使用'..'操作符来引用浏览器必须移回1个文件夹,然后按照你的路径在'..'运算符之后。这基本上是相对路径的工作方式,您可以使用它来访问不同文件夹中的资源。希望能帮助到你。
#5
-3
You are using cache system.. you can modify the original file and clear cache to show updates
您正在使用缓存系统..您可以修改原始文件并清除缓存以显示更新
#6
-5
You are using a relative path. You should use the absolute path, url(/assets/css/style.css).
您正在使用相对路径。您应该使用绝对路径url(/assets/css/style.css)。
#1
15
Html file (/index.html)
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 file (/assets/css/style.css)
Css文件(/assets/css/style.css)
body{
background:url(../img/bg.jpg);
}
#2
1
For mac OS you should use this :
对于mac OS,你应该使用这个:
body {
background: url(../../img/bg.png);
}
#3
0
you can use this
body{ background-image: url('../img/bg.png'); }
body {background-image:url('../ img / bg.png'); }
I tried this on my project where I need to set the background image of a div so I used this and it worked!
我在我的项目中尝试了这个,我需要设置div的背景图像,所以我使用它并且它有效!
#4
-1
Since you are providing a relative pathway to the image, the image location is looked for from the location in which you have the css file. So if you have the image in a different location to the css file you could either try giving the absolute URL(pathway starting from the root folder) or give the relative file location path. In your case since img and css are in the folder assets to move from location of css file to the img file, you can use '..' operator to refer that the browser has to move 1 folder back and then follow the pathway you have after the '..' operator. This is basically how relative pathway works and you can use it to access resoures in different folders. Hope it helps.
由于您要提供图像的相对路径,因此将从您拥有css文件的位置查找图像位置。因此,如果您将图像放在与css文件不同的位置,您可以尝试提供绝对URL(从根文件夹开始的路径)或给出相对文件位置路径。在你的情况下,因为img和css在文件夹资源中从css文件的位置移动到img文件,你可以使用'..'操作符来引用浏览器必须移回1个文件夹,然后按照你的路径在'..'运算符之后。这基本上是相对路径的工作方式,您可以使用它来访问不同文件夹中的资源。希望能帮助到你。
#5
-3
You are using cache system.. you can modify the original file and clear cache to show updates
您正在使用缓存系统..您可以修改原始文件并清除缓存以显示更新
#6
-5
You are using a relative path. You should use the absolute path, url(/assets/css/style.css).
您正在使用相对路径。您应该使用绝对路径url(/assets/css/style.css)。