+ 73

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

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

html css html5 css3

2nd Oct 2017, 5:58 PM

Adi Pratama

51 Antworten

+ 21

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

20th Sep 2017, 4:09 PM

Lord Krishna

+ 28

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

19th Sep 2017, 2:08 PM

Chinthana Kavinda

+ 18

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

20th Sep 2017, 4:59 PM

Lord Krishna

+ 16

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

20th Sep 2017, 5:08 PM

Lord Krishna

+ 14

I think need to add CSS autoprefixer: -webkit-background-size: cover; -o-background-size: cover; background-size: cover; Run my code again.

19th Sep 2017, 11:12 AM

Calviղ

+ 11

@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.

20th Sep 2017, 4:22 PM

Lord Krishna

+ 8

Try to add background-size: cover; https://code.sololearn.com/WaW0j3MJ9CiH/?ref=app

19th Sep 2017, 11:04 AM

Calviղ

+ 7

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

19th Sep 2017, 3:48 PM

Mubashir Ahmed

+ 7

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.

20th Sep 2017, 8:57 AM

Leigh E. O.