CSS - background-size：cover;不工作在Firefox [英] CSS - background-size: cover; not working in Firefox

问题描述

  body {
 background-image：url（./ content / site_data / bg.jpg）; 
 background-size：cover; 
 background-repeat：no-repeat; 
 font-family：'Lobster'，cursive; 
} 
  

检查：

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

Check: http://demo.jayantbhawal.in on firefox browsers, NOT in widescreen mode.

The code works on Chrome(Android + PC) and even the stock Android browser, but NOT Firefox(Android + PC). Is there any good alternative to it? Why is it not working anyways? Googled this issue a lot of times, but no one else seems to have this problem. Is it just me? In any case, how do I fix it? There are quite some questions on SO about it too, but none of them provide a legitimate solution, so can someone just tell me if they have background-size: cover; issues on firefox too?

So basically tell me 3 things: 1. Why is it happening? 2. What is a good alternative to it? 3. Is this happening to you too? On Firefox browsers of course.

Chrome Version 35.0.1916.114 m Firefox Version 29.0.1

Note: I may already be trying to fix it so at times you may see a totally weird page. Wait a bit and reload.

解决方案

Well it looks alright to me in latest mozilla.

Try using this if you face problems

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;
}

Edit

As some more clearance of answer to OP from comments

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

Its shorthand for,

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

Read more here

这篇关于CSS - background-size：cover;不工作在Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！