使用本地图像时，CSS背景图像不起作用

Question

this is my first time posting. 这是我第一次发帖。 I apologize if this is a basic question but I am having the hardest time wrapping my head around what I could possibly be doing wrong. 如果这是一个基本问题，我道歉，但我正在最艰难的时间绕着我可能做错的事情。

So, I am trying to do something extremely basic. 所以，我正在努力做一些非常基本的事情。 I simply want to stretch an image as the background for the body. 我只是想将图像拉伸为身体的背景。

Here is my CSS. 这是我的CSS。

body {
margin: 0;
background-image: url('../images/background.jpg');
background-attachment:fixed;
background-size:cover;
background-position:center;
position:relative;
color: #fff;
font-family: Calibri, sans-serif;
font-size: 100%;
line-height: 1.5em;
}

Pretty simple. 很简单。 Now, when I pull any image off the internet and insert it in the URL for the background-image, it works perfectly fine. 现在，当我从互联网上提取任何图像并将其插入背景图像的URL时，它的工作完全正常。 However, whenever I try using a local image, it doesn't work. 但是，每当我尝试使用本地图像时，它都不起作用。

On this site I'm trying to make (for an assignment), I have the main folder with the index.php, then three sub-folders: css, js, and images. 在这个网站上，我正在尝试制作（作业），我有index.php的主文件夹，然后是三个子文件夹：css，js和images。 Obviously, I put the background image in the images folder. 显然，我把背景图片放在images文件夹中。 However, I have also tried moving the background,jpg to the css folder and simply putting in "background.jpg" and that does not work either. 但是，我也尝试将背景，jpg移动到css文件夹，只是放入“background.jpg”，这也不起作用。

Oh, and the image definitely works, as far as I know. 哦，据我所知，图像肯定有效。

What am I doing wrong??? 我究竟做错了什么？？？

EDIT: here is my HTML for reference. 编辑：这是我的HTML供参考。 I'm pretty much making an instant messaging box that connects to a mySQL server. 我正在制作一个连接到mySQL服务器的即时消息框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title> My Shoutbox Project </title>
    <link rel="stylesheet" href="css/main.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script>
    <script src="js/shoutbox.js"></script>
</head>

<body>
<div id="container">

  <header>
    <h1>My Shoutbox</h1>
  </header>
  <div id="shouts">
    <ul>
        <li>foobar</li>
    </ul>
  </div>
  <footer>
    <form>
        <label for="name">Name </label>
        <input type="text" id="name" maxlength="20">
        <label for="shout">Shout Text </label>
        <input type="text" id="shout" maxlength="140">
        <input type="submit" id="submit" value="SHOUT!">
    </form>
  </footer>

</div> <!-- close container -->

</body>
</html>

There's a lot more code, since I am running some PHP (to be honest, I don't quite understand the PHP at all... I'm slowly figuring this out.) 还有更多的代码，因为我正在运行一些PHP（说实话，我根本不太了解PHP ......我正在慢慢搞清楚这一点。）

Answer 1

I copied hand pasted your code into my environment and it worked with out issue. 我将你的代码粘贴到我的环境中并将其解决了问题。 My file arrangement: 我的档案安排：

http://localhost/shoutbox.html
http://localhost/css/main.css
http://localhost/images/background.jpg

If you have this arrangement 如果你有这个安排

http://localhost/shoutbox/shoutbox.html
http://localhost/css/main.css
http://localhost/images/background.jpg

you need to change 你需要改变

<link rel="stylesheet" href="../css/main.css">

to 至

<link rel="stylesheet" href="/css/main.css">

(the single / tells it to go to the top level) or move images and css folders into shoutbox folder. （单个/告诉它转到顶层）或将图像和css文件夹移动到shoutbox文件夹中。

(Note, I am making some assumptions since I cannot see your full file structure) （注意，我正在做一些假设，因为我看不到你的完整文件结构）

使用本地图像时，CSS背景图像不起作用

问题描述

1 个解决方案

解决方案1
1 2016-01-23 06:29:00

使用本地图像时，CSS背景图像不起作用

问题描述

1 个解决方案

解决方案1 1 2016-01-23 06:29:00

解决方案1
1 2016-01-23 06:29:00