blocks|key|193272|text|根据你的CSS文件路径，我假设它和你的HTML页面在同一个目录下，你必须修改url，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|193273|body+{+background:+url(img/debut_dark.png)+repeat+0+0;+}|code-block|syntax|javascript|193274|entityMap^0|12|3|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

According to your CSS file path, I will suppose it is at the same directory with your HTML page, you have to change the <code>url</code> as follows:

<pre class="lang-css prettyprint-override"><code>body { background: url(img/debut_dark.png) repeat 0 0; }
</code></pre>

blocks|key|411535|text|我知道这并没有解决OP的具体情况，但是对于来自谷歌的其他人，请不要忘记尝试基于元素类型的display:+block;。我在里有这张图片，但它没有出现...|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|411536|entityMap^0|18|F|1Q|3|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

I know this doesn't address the exact case of the OP, but for others coming from Google don't forget to try <code>display: block;</code> based on the element type. I had the image in an <code>&lt;i&gt;</code>, but it wasn't appearing...

blocks|key|193299|text|确保你的身体有一个高度，f.ex：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|193300|body+{+
++++background:+url(/img/debut_dark.png)+repeat;
++++min-height:+100%25;
}|code-block|syntax|javascript|193301|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Make sure your body has a height, f.ex:

<pre><code>body { 
 background: url(/img/debut_dark.png) repeat;
 min-height: 100%;
}
</code></pre>

blocks|key|193351|text|我也有同样的问题。但它对我来说工作正常|type|unstyled|depth|inlineStyleRanges|entityRanges|data|193352|background:+url(../img/debut_dark.png)+repeat|code-block|syntax|javascript|193353|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I have the same issue. But it works properly for me

<pre><code>background: url(../img/debut_dark.png) repeat
</code></pre>

blocks|key|411679|text|您必须在URL中使用相对路径。我想您在index.html所在的根目录中创建了两个文件夹。一个是'CSS‘文件夹，另一个是'img’文件夹。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|411680|现在，如果你必须访问css文件中的'img‘文件夹。因此您必须使用"../“语法在根目录中返回一次。然后使用"../img“语法移动到”img“文件夹。然后写下镜像名称"../img/debut_dark.png“。|411681|body+{+
++++background:+url("../img/debut_dark.png")+repeat+0+0;
}|code-block|syntax|javascript|411682|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You have to use a relative path in the URL. I think you made two folders in the root directory where your index.html resides. One is 'CSS' folder &amp; another is 'img' folder.
Now, if you have to access 'img' folder in css files. So you have to go back once in root directory using &quot;../&quot; syntax. Then move to the 'img' folder using &quot;../img&quot; syntax. Then write the image name &quot;../img/debut_dark.png&quot;.
<pre><code>body { 
 background: url(&quot;../img/debut_dark.png&quot;) repeat 0 0;
}
</code></pre>

blocks|key|411630|text|body+{+
++++++++background:+url("../img/debut_dark.png")+no-repeat+center+center+fixed;
++++}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|411631|对我很管用。|unstyled|411632|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>body { 
 background: url("../img/debut_dark.png") no-repeat center center fixed;
 }
</code></pre>

Worked for me.

blocks|key|411725|text|我也有同样的问题。对我来说，它适用于：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|411726|++background:+url("../img/green.jpg")+no-repeat+center+bottom/cover;
++height:+100vh;|code-block|syntax|javascript|411727|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I had the same issue. For me it worked with:

<pre><code> background: url("../img/green.jpg") no-repeat center bottom/cover;
 height: 100vh;
</code></pre>

blocks|key|193312|text|我在本地计算机上使用嵌入式CSS。我将atom.jpg文件放在与html文件相同的文件夹中，然后这段代码就可以工作了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|193313|background-image:url(atom.jpg);|code-block|syntax|javascript|193314|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I am using embedded CSS on a local computer. I put the atom.jpg file in the same folder as my html file, then this code worked:

<pre><code>background-image:url(atom.jpg);
</code></pre>

blocks|key|411750|text|background+:+url+(/img..+)|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|411751|注意:如果css位于不同的文件夹中，请确保图像路径以正斜杠开头。|unstyled|411752|这对我很管用。好了！|411753|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>background : url (/img.. )
</code></pre>
NOTE: If you have your css in a different folder, ensure that you start the image path with THE FORWARD SLASH.
It worked for me. !

blocks|key|193450|text|我发现这个属性在提供完整位置时会显示图像。我只是简单地将图像上传到我的服务器上，并将该图像的位置链接到了background-+image+:url("xxxxx.xxx")；属性中，它终于工作了，但是如果你们没有服务器，那么可以通过进入该图像的属性来尝试在属性中输入该图像的完整位置。虽然我在HTML文件的标签中使用了这个属性，但它肯定也适用于CSS文件。如果该方法不起作用，那么尝试将您的图像上传到behance、facebook、instagram等互联网上，检查图像并将该位置复制到您的属性中。希望这能行得通|type|unstyled|depth|inlineStyleRanges|entityRanges|data|193451|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Well I figured it out that this attribute display image when the full location is provided in it. I simply uploaded that image on my server and linked the location of that image in the background-image:url("xxxxx.xxx"); attribute and it finally worked but if you guys don't have server then try to enter the complete location of the image in the attribute by going in property of that image. Although i was using this attribute in tag of an HTML file but it will surely works on CSS file too. If that method didn't work then try to upload your image on internet like behance, facebook, instagram,etc and inspect the image and copy that location to your attribute.. Hope This will work

blocks|key|193487|text|我也有同样的问题，在我删除了重复0+0部分后，它解决了我的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|193488|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I was having the same issue, after i remove the repeat 0 0 part, it solved my problem.

blocks|key|193575|text|如果您的路径是正确的，那么我认为您的body部分中没有任何元素。只需定义主体的高度，您的代码就能正常工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|193576|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

If your path is correct then I think you don't have any element in you body section.
Just define the height of the body and your code will work.

blocks|key|193793|text|在这个问题中，我们将描述如何使用外部css调用图像|type|unstyled|depth|inlineStyleRanges|entityRanges|data|193794|点赞:+assets/images/laravelamit.jpg|193795|然后，您必须转到assets/css/style.css并打开并放入|193796|背景:+url(../images/laravelamit.jpg)；|193797|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

In this Question we are going to describe how to use external css use for image calling
like: assets/images/laravelamit.jpg
then you have to go to assets/css/style.css and open and put
background: url(../images/laravelamit.jpg);

blocks|key|411957|text|如果您是在本地开发，请检查您是否在VSCode中处理SCSS+to+CSS+Live+sass编译器|type|unstyled|depth|inlineStyleRanges|entityRanges|data|411958|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

If you are developing locally
Check if you are processing SCSS to CSS
Live sass compiler in VSCode

blocks|key|412017|text|在html文件中的<link>标记中，在<link>标记的href中，在实际路径之前放置一个点(.)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|412018|如果样式表的路径是/css/style.css，则引用将如下所示|412019|<link+rel="stylesheet"+href="./img/image.jpg">|code-block|syntax|javascript|412020|然后在.css文件内部|412021|放置一个双点(..)在图像存储的实际路径之前，它将如下所示|412022|body{background-image+:+url("../img/image.jpg");}|412023|上面的方法对我有效。|412024|entityMap^0|9|6|K|6|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|14|8|@]|D|@]|E|$]]|$1|Q|3|R|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|S|3|T|5|6|7|16|8|@]|D|@]|E|$]]|$1|U|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|V|$]]

inside <code>&lt;link&gt;</code> tag in your html file inside href of <code>&lt;link&gt;</code> tag put a dot(.)before the actual path
if the path of style sheet is /css/style.css then the reference will be as follows
<pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;./img/image.jpg&quot;&gt;
</code></pre>
then inside the .css file
put a double dot(..) before the actual path which the image stored it will be like this
<pre><code>body{background-image : url(&quot;../img/image.jpg&quot;);}
</code></pre>
the above method worked for me

blocks|key|412072|text|您可以尝试使用!important语法，它应该可以很好地工作：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|412073|background:+url(/img/debut_dark.png)+repeat+0+0+!important;|412074|entityMap^0|7|A|0|0|1N|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

You can try using the <code>!important</code> syntax, it should work fine :
<code>background: url(/img/debut_dark.png) repeat 0 0 !important;</code>

blocks|key|193411|text|基本上问题出在文件路径上。url开头的正斜杠使其查找根目录下的文件。去掉它，它将是一个相对于这个css文件的路径-就像这样：background-image:+url(img/debut_dark.png);|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|193412|如果您使用Atom，复制图像的项目路径有时会在复制的路径中包含正斜杠，因此要小心。|193413|entityMap^0|1Q|16|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|N|8|@]|D|@]|E|$]]]|I|$]]

Basically the problem is with file path.
The forward slash in the beginning of the url makes it look for the file at the root. Removing that, it will be a path relative to this css file - like this: 
<code>background-image: url(img/debut_dark.png);</code>

If you are using Atom, copying the project path of image sometimes includes forward slash in the copied path so be careful.

blocks|key|193728|text|如果您使用的是vs代码，请尝试使用background:url("img/bimg.jpg")而不是background:url('img/bimg.jpg')我对此无能为力，我将其替换为“|type|unstyled|depth|inlineStyleRanges|entityRanges|data|193729|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

if you are using vs code just try using
background:url(&quot;img/bimg.jpg&quot;)
instead of background:url('img/bimg.jpg')
Mine worked at it
Nothing much I replaced ' with &quot;

I have an HTML file with a subdirectory called <code>img</code> with an image called <code>debut_dark.png</code>. In my CSS file, I have:

<pre><code>body { 
 background: url(/img/debut_dark.png) repeat 0 0;
}
</code></pre>

The HTML file has the body tag and does include the CSS file appropriately. I know for sure the CSS file is included properly as everything else is formatted properly.

The background image is not getting displayed, I am only seeing a white background. Any ideas how to fix this, or even how to debug it?

CSS Background Image Not Displaying

服务器

编译器

我有一个包含一个名为img的子目录的HTML文件，其中包含一个名为debut_dark.png的图像。在我的CSS文件中，我有：body {     background: url(/img/debut_dark.png) repeat 0 0;}HTML文件具有body标记，并相应地包含CSS文件。我确信CSS文件是正确包含的，因为其他所有内容都被正确格式化。背景图像没有显示，我只看到一个白色背

问CSS背景图像不显示
EN

回答 18

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS背景图像不显示EN

回答 18

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS背景图像不显示
EN