CODEWITHSUNDEEP
androidhtmlcssfirefoxbackground-image
Jayant Bhawal
Jayant Bhawal

Reputation: 2204

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.

Upvotes: 1

Views: 13506

Answers (5)

71GA
71GA

Reputation: 1391

For Firefox:

~$ firefox -v
Mozilla Firefox 68.9.0esr

This centers the image...

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

Upvotes: 0

potato83
potato83

Reputation: 71

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.

Upvotes: 2

4dgaurav
4dgaurav

Reputation: 11506

enter image description hereWell 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

Upvotes: 7

Nitesh
Nitesh

Reputation: 96

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. :)

Upvotes: -1

Anju Aravind
Anju Aravind

Reputation: 3362

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

Upvotes: -1

Related Questions