Question

body{
    background-image: url("./content/site_data/bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    font-family: 'Lobster', cursive;
}

在firefox浏览器上检查：http://demo.jayantbhawal.in，而不是在宽屏模式下。

该代码适用于Chrome（Android + PC）甚至是现有的Android浏览器，但不适用于Firefox（Android + PC）。有什么好的替代品吗？为什么它不能正常工作？谷歌搜索了很多次这个问题，但似乎没有其他人有这个问题。只有我吗？无论如何，我该如何解决？关于它也有很多关于它的问题，但它们都没有提供合法的解决方案，所以有人可以告诉我他们是否有背景大小：封面;关于firefox的问题呢？

所以基本上告诉我三件事： 1.为什么会这样？ 2.什么是它的好选择？这也发生在你身上吗？当然是在Firefox浏览器上。

Chrome版本35.0.1916.114 m Firefox版本29.0.1

注意：我可能已经尝试修复它，所以有时您可能会看到一个非常奇怪的页面。稍等一下再重装。

Answer 1

enter image description here 在最新的mozilla中我看起来没问题。

如果遇到问题，请尝试使用此功能

body { 
  background: url("./content/site_data/bg.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: 'Lobster', cursive;
}

修改

从评论
获得更多OP答案
background: url("./content/site_data/bg.jpg") no-repeat center center fixed;

简写，

background-image: url("./content/site_data/bg.jpg"); background-repeat:no-repeat; background-position: center center; background-attachment:fixed;

Read more here

Answer 2

所以我刚遇到这个问题，因为我遇到了同样的问题。事实证明这个问题（在我的情况下无论如何）都没有

<!DOCTYPE html>

在我的html文件的顶部（这似乎只影响背景大小：Firefox中的封面。

Answer 3

后台大小已添加到Firefox 3.6中，但需要-moz供应商前缀。

使用

-webkit-background-size: 100% 100%;           /* Safari 3.0 */
     -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
       -o-background-size: 100% 100%;           /* Opera 9.5 */
          background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */

Answer 4

bhawal，我认为你使用的是旧版本的mozilla。嗯，这是将供应商特定的前缀属性与W3标准一起添加的常见做法。我们这样做只是为了确保它在大多数浏览器中都有效。在您的情况下，您可以使用以下CSS规则：

body { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

如果这不起作用，请告诉我。并且如果有效则投票。：）

Answer 5

对于Firefox：

~$ firefox -v
Mozilla Firefox 68.9.0esr

这会使图像居中...

body {
    background-color: #1D4979;
    background-image: url(../images/background-2.png);
    min-height: 100vh;
    min-width: 100vw;
    background-size: cover;
    background-position: center;    
    background-repeat: no-repeat;
}

CSS - 背景大小：封面;不在Firefox中工作

5 个答案: