CSS背景图片未加载，似乎找不到图片

Question

I'm making a personal website and my CSS background-image doesn't seem to be working. 我正在建立一个个人网站，但是我的CSS背景图片似乎无法正常工作。 Link to the site is http://distorts.me/new/ it seems that it doesn't find the image because it doesn't load, it is just a white area. 该站点的链接是http://distorts.me/new/ ，因为它没有加载，所以似乎找不到图像，它只是一个白色区域。 (Sorry for the improper punctuation not very literate ) I'm using chrome. （抱歉，标点符号不正确，我不太识字）我正在使用chrome。

style.css style.css

    body {
    background-image: url("http://distorts.me/new/includes/background.png");
    color: #C0C0C0;
}

.navbar {
  margin-bottom: 0;
  border-radius: 0;
}

.row.content {height: 450px}

.sidenav {
  padding-top: 20px;
  background-color: #808080;
  height: 100%;
  font-size: 20px;
}

a {
  color: #C0C0C0;
  text-decoration: none;
}

a:hover {
    text-decoration: none;
    color: #404040;
}

footer {
  background-color: #555;
  color: white;
  padding: 15px;
}

@media screen and (max-width: 767px) {
  .sidenav {
    height: auto;
    padding: 15px;
  }
  .row.content {height:auto;} 
}

index.php index.php

    <html lang="en">
<!-- George M. -->
<!-- 2/26/16 -->
<?php
include 'includes/head.php';
?>
<body oncontextmenu="return false" background="includes/background.png">
<header class="container-fluid text-center" style="background-color: #404040;">
    <h1>George M. - Welcome</h1>
</header>
<div class="container-fluid text-center">    
  <div class="row content">
    <div class="col-sm-2 sidenav" style="height: 183%">
      <p><a href="index-2.html">Home</a></p>
      <p><a href="/about">About Me</a></p>
      <p><a href="/services">Services</a></p>
      <p><a href="/contact">Contact</a></p>
    </div>
    <div class="col-sm-8 text-middle">
      <h1>Welcome</h1>
      <p>test</p>
      <hr> 
      <h3>Test</h3>
      <p>test</p>
    </div>
  </div>
</div>
<footer id="foot" class="container-fluid text-center">
</footer>
<script type="text/javascript">
    document.getElementById('foot').innerHTML = 
    "<p>&copy " + new Date().getFullYear() + " Distorts | George M. All rights reserved. <span style='color: #808070;'>Made by George M.</span>"
</script>
</body>
</html>

head.php head.php

<head> 
    <title>George M | Home</title>
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="author" content="Distorts">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" type="text/javascript"></script>
</head>

Answer 1

When the code is right, the most likely problem to be causing issues is caching. 如果代码正确，则最有可能引起问题的问题是缓存。 Some web hosting servers have caching preconfiguration and since you are using PHP, you can simply send PHP headers that prevent caching - add these lines at the very top of your header.php : 某些Web托管服务器具有缓存预配置，并且由于您使用的是PHP，因此您可以简单地发送防止缓存的PHP标头-将这些行添加到header.php的最顶部：

<?php
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
?>

Another trick which can be used is timestamping / querystring - this approach basically forces the browser to reload the file since its URL is different than what it previously loaded. 可以使用的另一种技巧是给timestamping / querystring -这种方法基本上迫使浏览器重新加载文件，因为其URL与先前加载的URL不同。 So naturally, we add the time variable (because time is always changing). 因此，自然地，我们添加了时间变量（因为时间总是在变化）。 Other developers use this method by adding a version query but that requires more maintenance. 其他开发人员通过添加版本查询来使用此方法，但这需要更多维护。

Adding file timestamp with PHP: 使用PHP添加文件时间戳：

<link rel="stylesheet" type="text/css" href="style.css?t=<?php echo date('YmdHis');">

Output 输出量

<link rel="stylesheet" type="text/css" href="style.css?t=20160227182425">

File version example 文件版本示例

<link rel="stylesheet" type="text/css" href="style.css?v=2.1">

Also, keep in mind that CSS background paths are relative to the CSS file itself, not HTML document. 另外，请记住，CSS背景路径是相对于CSS文件本身（而不是HTML文档）的。 Links in html are relative to html document, links in CSS are relative to CSS file. html中的链接是相对于html文档的，CSS中的链接是相对于CSS文件的。 So the correct way to reference your image is by the following: 因此，通过以下方法引用图像的正确方法是：

background-image: url("includes/background.png");

Answer 2

Try changing your background url to background src : 尝试将背景网址更改为background src：

background-image: src (" http://distorts.me/new/includes/background.png "); background-image：src（“ http://distorts.me/new/includes/background.png ”）;

Answer 3

Working fine on Chrome. 在Chrome上正常工作。 Try changing your background url to: 尝试将背景网址更改为：

background-image: src("/includes/background.png");

And place that image to that server rather than giving full path. 并将该映像放置到该服务器，而不是提供完整路径。

CSS背景图片未加载，似乎找不到图片

问题描述

3 个解决方案

解决方案1
0 已采纳 2016-02-27 23:32:22

解决方案2
-1 2016-02-27 19:10:21

解决方案3
-1 2016-02-27 19:14:33

CSS背景图片未加载，似乎找不到图片

问题描述

3 个解决方案

解决方案1 0 已采纳 2016-02-27 23:32:22

解决方案2 -1 2016-02-27 19:10:21

解决方案3 -1 2016-02-27 19:14:33

解决方案1
0 已采纳 2016-02-27 23:32:22

解决方案2
-1 2016-02-27 19:10:21

解决方案3
-1 2016-02-27 19:14:33