doubanduo7620 2016-02-27 19:01
浏览 112
已采纳

CSS背景图像没有加载，似乎没有找到图像

I'm making a personal website and my CSS background-image doesn't seem to be working. 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. (Sorry for the improper punctuation not very literate ) I'm using chrome.

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

    <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> 
    <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>
  • 写回答

3条回答 默认 最新

  • duandiaoqian5795 2016-02-27 23:32
    关注

    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:

    <?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. 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:

    <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. Links in html are relative to html document, links in CSS are relative to CSS file. So the correct way to reference your image is by the following:

    background-image: url("includes/background.png");
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 对于相关问题的求解与代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 信号傅里叶变换在matlab上遇到的小问题请求帮助
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作
  • ¥15 求NPF226060磁芯的详细资料
  • ¥15 使用R语言marginaleffects包进行边际效应图绘制