Css - Background-size: Cover; Not Working In Firefox

May 29, 2023 Post a Comment

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

Solution 1:

enter image description here 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;

Solution 2:

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.

Solution 3:

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

Solution 4:

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

Solution 5:

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

Html5 Tech