Why is background size: 100% 100% more working in Firefox?

Question

I'm just trying to achieve a background image of the body that always fills the browser window completely (aspect ratio doesn't matter).

Standard css code

 body{
     background-image: url('test.jpg');
     background-size: 100% 100%;
 }

It seems to work fine in almost all modern large browsers, including Firefox 45. But in the latest Firefox 52, the background image is cropped to a very narrow strip in the vertical direction, which then repeats until it fills the window. Am I using some outdated code that I don’t know about, or is it a Firefox bug?

Answer 1

From spec definition tobackground-size :

.

3.11.1 ( ):

3.11.1.

, . , . ( , .) , .. .

body, ; 3.11.2 : " , ".

, , Firefox , ( , Bugzilla , ). HTML- , , , background-size . -, Firefox 52 8 , , background-size: 100% 100%, , .

, , background-size: 100% html body 100% , , height: 100% min-height: 100% html body? ( min-height on body , , body, , . 3.2.11)

min-height: 100vh body, , , , .

Answer 2

background-size - . a height , .

body {
  background: url('http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg');
  background-size: 100% 100%;
  min-height: 100vh;
}

Answer 3

Try the following:

background: url(test.jpg) no-repeat;
background-size: cover;
background-position: 100%;

Hope this works.