Question

我已经按照所有教程进行了操作，所有教程都说出来。我在我的css样式表中指定了body中的背景，但页面只显示一个空白的白色背景。 Image与.html和.css页面位于同一目录中。教程说

<body background="image.jpeg">

已弃用，因此我在css中使用

body {background: url('image.jpeg');}

没有成功。这是整个CSS样式表：

body 
{
background-image: url('nickcage.jpg');
padding-left: 11em;
padding-right: 20em;
font-family:
Georgia, "Times New Roman",
Times, serif; 
color: red;        
}

Answer 1

首先，再见那些引号：

background-image: url(nickcage.jpg); // No quotes around the file name

接下来，如果您的html，css和图像都在同一目录中，那么删除引号应该修复它。但是，如果您的CSS或图像位于html所在的子目录中，您需要确保正确地指向图像：

background-image: url(../images/nickcage.jpg); // css and image live in subdorectories

background-image: url(images/nickcage.jpg); // css lives with html but images is a subdirectory

希望它有所帮助。

Answer 2

我有同样的问题。问题最终成为图像文件的路径。确保图像路径相对于CSS文件的位置而不是HTML。

Answer 3

我遇到了同样的问题。如果你的图像在文件夹中，那么试试这个

background-image: url(/resources/img/hero.jpg);

别忘了把反斜杠放在第一个文件夹的前面。

Answer 4

试试这个

background-image: url("/yourimagefolder/yourimage.jpg");

当我使用background-image: url("yourimagefolder/yourimage.jpg");

时，我遇到了同样的问题

注意造成差异的斜线。文件夹的级别是我无法加载图像的原因。我猜你也遇到了同样的问题

Answer 5

这是另一个图片网址结果......工作正常...我只是放了一个图片路径..请检查一下..

Fiddel：http://jsfiddle.net/287Kw/

body 
{
background-image: url('http://www.birds.com/wp-content/uploads/home/bird4.jpg');
padding-left: 11em;
padding-right: 20em;
font-family:
Georgia, "Times New Roman",
Times, serif; 
color: red;


}

Answer 6

对于我来说跟随行是为我工作，我把它放在我的身体的CSS（图像在我的CSS和.html文件的同一文件夹中）：

background: url('test.jpg');

您必须关注的其他事项是，请注意图像扩展，确保您的图片具有.jpeg或.jpg扩展名。感谢

Answer 7

我发现问题是你不能使用短网址来映像＆＃34; img / image.jpg＆＃34;

你应该使用完整的网址＆＃34; http://www.website.com/img/image.jpg＆＃34;但我不知道为什么!!

Answer 8

图像的路径应该是相对的，这意味着如果css文件在css文件夹中，那么你应该用 ../ 开始路径，例如

body{
   background-image: url(../images/logo.jpg);
}

这是因为您必须通过 ../ 路径然后 /images/logo.jpg 路径返回主目录。如果你在html本身中包含css文件

body{
   background-image: url(images/logo.jpg);
}

这段代码可以正常工作。

Answer 9

我想分享我的调试过程，因为我被困在这个问题上至少一个小时。运行本地主机时找不到图像。要添加一些上下文，我在以下目录中的rails应用程序中进行样式设置：

apps/assets/stylesheets/main.scss

我想在标头标签中渲染背景图片。以下是我最初的实现。

header {
    text-align: center;
    background: linear-gradient(90deg, #d4eece, #d4eece, #d4eece),
              url('../images/header.jpg') no-repeat;
              background-blend-mode: multiply;
              background-size: cover;
}

...因此我分别在Chrome服务器和Chrome开发工具中的控制台中收到以下错误：

ActionController::RoutingError (No route matches [GET] "/images/header.jpg")
GET http://localhost:3000/images/header.jpg 404 (Not Found)

我尝试了不同的网址变体：

url('../images/header.jpg') # DID NOT WORK
url('/../images/header.jpg') # DID NOT WORK
url('./../images/header.jpg') # DID NOT WORK

它仍然无效。那时，我非常困惑......我决定将图像文件夹从assets目录（这是默认设置）移动到stylesheets目录中，并尝试了以下网址变体：

url('/images/header.jpg') # DID NOT WORK
url('./images/header.jpg') # WORKED
url('images/header.jpg') # WORKED

我不再遇到控制台和rails服务器错误。但由于某种原因，图像仍未显示。在暂时放弃之后，我发现解决方法是添加一个高度属性以便显示图像......

header {
    text-align: center;
    height: 390px;
    background: linear-gradient(90deg, #d4eece, #d4eece, #d4eece),
              url('images/header.jpg') no-repeat;
              background-blend-mode: multiply;
              background-size: cover;
}

不幸的是，我仍然不确定为什么使用“../images/header.jpg”的3个初始网址尝试无法在localhost上运行，或者当我应该或不应该在开头时添加句点时网址。

它可能与在application.html.erb中设置默认链接标记的方式有关，或者它可能是.scss vs .css。或者，也许这就是url（）的背景属性如何工作（图像需要与css文件在同一目录中）？无论如何，这就是我解决了CSS背景图像无法在localhost上加载的问题。

Answer 10

我更改了wamp-server-installed apache web服务器的文档根目录。所以使用相对网址即（images / img.png）并不起作用。我必须使用绝对URL才能使其工作，即

背景图像：网址（＆＃34; http://localhost/project_x/images/img.png＆＃34）;

Answer 11

以下代码对我有用，我将图像放在somefolder / assets / img / background_some_img.jpg

background-image: url('../img/background_some_img.jpg');
background-size: cover;
background-repeat: no-repeat;

Answer 12

如果将image和css文件夹放在父目录中假设资产，则以下代码可以正常工作。双引号或没有双引号都可以正常工作。

＆＃13;

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

＆＃13;

在其他情况下，如果您打电话给某个班级并尝试将背景图片放在特定位置，那么您还必须提及高度和宽度。

Answer 13

在 Chrome 开发者工具中，您可以查看图片是否已加载。查看检查和使用 css 样式选项卡。如果图像在那里加载，那么你有一段时间没有添加 css

<块引用>

高度：500px;

图像的属性。

yourselector {
background-image: url("photographer.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  height: 500px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire 
                          container */
}

Answer 14

就我而言，我使用双引号 "" 而不是单引号 ''

  const styling = {                
//      backgroundImage: `url('${backgroundSrc}')`,  <------ HERE
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center",
        backgroundSize: "cover"        
    }

有些链接中的引号没有被转义，所以它们搞砸了。

改用双引号 ""。像这样 backgroundImage: `url("${backgroundSrc}")`,

Answer 15

我遇到了同样的问题，在阅读完之后发现了这个问题，这是斜线。 Windows路径：图像\ green_cup.png

有效的CSS：图像/ green_cup.png

images \ green_cup.png不起作用。

菲尔

Answer 16

我可以在这里带一点帮助......看来当你使用say background-image：url（“/ images / image.jpg”）;或background-image：url（“images / image.jpg”）;或background-image：url（“../ images / image.jpg”）;不同的浏览器似乎有不同的看法。第一个浏览器似乎将其视为domain.com/images/image.jpg ....浏览器在domain.com/css/images/image.jpg看到的第二个....浏览器看到的最后一个domain.com/PathToImageFile/image.jpg ...希望这有帮助

CSS背景图片无法加载

16 个答案: