How to make auto-stretch background image which compatible with both Firefox & smartphone?

Question

First introduction,
What is "Auto-Stretch"?
Here, for example:
https://s26.postimg.org/68fq371bd/Screenshot_70.png

Congratulation to Lord Krishna (https://www.sololearn.com/Profile/4843153/?ref=app)
His source code:
https://code.sololearn.com/WWcL91up06DJ/?ref=app
Image result:
https://s26.postimg.org/dd0hietyh/Screenshot_79.png

Calvin (https://www.sololearn.com/Profile/4354920/?ref=app):
He is using cover.
https://code.sololearn.com/WaW0j3MJ9CiH/?ref=app#css
Please upvote their codes to appreciate their effort.

Advice from Leigh E. O. (https://www.sololearn.com/Profile/4824451/?ref=app):
Background-size: 100%, 100%;
Result:
Working on a smartphone, chrome, others, but not on Firefox.

Because of browser prefix?
I tried -moz-background-size: 100% 100%;
But it's still not working,
Image result:
https://s26.postimg.org/y8mrtnq5l/Screenshot_78.png

My Firefox version?
My Firefox version already latest version, my browser is the auto update mode. https://s26.postimg.org/xqifmblt5/Screenshot_76.png

Answer 1

@Adi
are you still unable to get it working full screen?
if yes then check this code, might help you a little
https://code.sololearn.com/WWcL91up06DJ/?ref=app

if that code does not help then experiment using ways provided by this site something should click
https://css-tricks.com/perfect-full-page-background-image/

Answer 2

I think images are not useful as page backgrounds.
Because all internet users like quick loading pages.😊

Answer 3

@Andrew G
that works in chrome but not in Firefox. @Adi needs a solution which works in Firefox.

Answer 4

@Adi
did you try my code & the other methods specified by that site ?

Answer 5

I think need to add CSS autoprefixer:

-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;

Run my code again.

Answer 6

@A penguin
i tried some of the above ways posted by others most work correctly but some of them fail in Firefox (chrome is okay ) the one I posted should work okay in Firefox.

Answer 7

Try to add

background-size: cover;

https://code.sololearn.com/WaW0j3MJ9CiH/?ref=app

Answer 8

@loli use this
background-repeat:no-repeat ;
background-size: cover;

Answer 9

background-size : 100% 100%;

↑ This'll stretch out the background image to completely fill out its element. ( no cropping )

But setting the background size with "background-size : cover; " will make the background image retain its original aspect ratio, meaning sometimes, the image will be cropped.

Answer 10

Cola

Answer 11

Try to add

background-repeat: no-repeat;

Answer 12

like how @chinthana kavinda

Answer 13

How to add an image/logo on a header? ?

Answer 14

yeah..try change browser and tell us

Answer 15

code is working fine now so whats the problem?

Answer 16

congrats 👍

Answer 17

difference html html5

Answer 18

si tu veux une background comme color
fait comme ca background-color:blue;

Answer 19

@Dave u can watch anime on lots of sites but yeah kissanime is best 😂

Answer 20

@krishna her problem is that her screen is blank white and nothing appears