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

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

So I just came across this question because I was having the same problem. It turned out the issue (in my case anyway) was not having

<!DOCTYPE html>

at the top of my html file (this only seemed to affect the background-size: cover in Firefox.

background-size was added to Firefox 3.6, however the -moz vendor prefix was required.

use

-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 */

bhawal, I think you are using older version of mozilla. Well, this is a common practice to add vendor specific prefixed properties together with W3 standard. We do this just to make sure that it work in most of the browsers. In your case, you can use the CSS rule below:

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

Let me know, if this doesn't work; and vote up if it works. :)

来源：https://stackoverflow.com/questions/24104683/css-background-size-cover-not-working-in-firefox

标签

android

html

css

firefox

background-image