背景图片在 Firefox 和 IE 中不显示答案

【问题标题】：Background image doesn't show in firefox and IE背景图片在 Firefox 和 IE 中不显示
【发布时间】：2015-09-17 08:19:29
【问题描述】：

我是引导程序和整体网页设计的新手。使用原始 bootstrap.css 和 bootstrap 的默认 html 文件，我将其添加为我的自定义 css：

 body {
    margin: 0;
    background: url("some image url");
    background-position: center top;
    background-size: 1440px 800px;
    background-repeat:no-repeat;
    display: compact;
}

它在 chrome 上运行良好，但在 IE 或 firefox 上不显示。使用萤火虫我检查了css并得到了这个：

body {
   background: url("some image url") repeat scroll center top / 1440px 800px rgba(0, 0, 0, 0);
   margin: 0;
  }

但我仍然无法弄清楚问题出在哪里。有没有其他方法可以编写简单的 CSS sn-p 以便 IE 和 firefox 可以使用它？

编辑：我修复了分号问题，但仍然没有出现。萤火虫显示：

body {
margin: 0;
background: url("some image url");
background-position: center top;
/* background-size: cover; */
background-size: 1440px 800px;
background-repeat:no-repeat; 
display: compact;
  }

编辑：我不得不将图像的直接路径与使用 url 放在一起。谢谢大家的建议和帮助！

【问题讨论】：

background-repeat 后面缺少分号？
什么是 display:compact;?
@Pangloss "compact：根据上下文，该 display 属性的值创建一个内联或块级渲染框。在每种情况下，可能会应用不同的 CSS 属性到紧凑元素。在块级上下文中，紧凑元素呈现在块元素的左边或右边距。紧凑元素参与当前行的行高计算，以及'vertical-align'属性值是相对于块元素的。” - source
@dippas 很有趣，以前从未听说过，在 mdn 上也找不到。可能是问题出在哪里，但不确定。
您的代码似乎可以在 IE、Chrome 和 FireFox 中运行：jsfiddle.net/grfjs1be/1。请创建一个 Stack Snippet 或 JSFiddle 来重现该问题。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

好吧，所有其他答案都很棒，我总是使用它们，但如果它们不起作用，你可能会做一个简单的技巧，比如在身体的开头添加一个 img 并给它 100% 的高度和宽度让照片会根据屏幕尺寸做出响应这将拉伸照片，它会像用户的背景照片一样，因为它看起来一样

【讨论】：

这是一个很棒的提示。谢谢！

【解决方案2】：

你好@tyrell_c 我认为问题可能是 Firefox 不支持“display:compact”，也可以尝试省略图片 URL 中的引号

【讨论】：

没用。好像有没有引号都没关系。
嘿，我尝试了你提供的代码，它工作得很好......（在 Firefox 25.0 上测试）你能告诉我你使用的是哪个版本的 Firefox 吗？谢谢
使用 Firefox ESR 31.2.0
我检查了另一个问题，似乎是一个值得尝试的解决方案。请检查以下链接中投票赞成的正确问题。 stackoverflow.com/questions/13423510/… 也可以查看这个论坛，它有一些有趣的信息：forums.mozillazine.org/viewtopic.php?f=25&t=2778365
耶！有效！我必须包含路径 vs 包含背景才能工作的 url！

【解决方案3】：

http://www.w3schools.com/css/css_background.asp

你需要改变

background: url("some image url");

进入

background-image: url("some image url");

【讨论】：

我同意问题出在那一行，还记得检查图片的 URL，图片的路径是相对于 css 文件的，而不是引用 css 的页面.