+ 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

2nd Oct 2017, 5:58 PM
Adi Pratama, S.Kom.
Adi Pratama, S.Kom. - avatar
46 Answers
+ 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
Lord Krishna - avatar
+ 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
Chinthana Kavinda - avatar
+ 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
Lord Krishna - avatar
+ 16
@Adi did you try my code & the other methods specified by that site ?
20th Sep 2017, 5:08 PM
Lord Krishna
Lord Krishna - avatar
+ 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ղ
Calviղ - avatar
+ 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
Lord Krishna - avatar
+ 8
Try to add background-size: cover; https://code.sololearn.com/WaW0j3MJ9CiH/?ref=app
19th Sep 2017, 11:04 AM
Calviղ
Calviղ - avatar
+ 7
@loli use this background-repeat:no-repeat ; background-size: cover;
19th Sep 2017, 3:48 PM
Mubashir Ahmed
Mubashir Ahmed - avatar
+ 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.
Leigh E. O. - avatar
+ 6
Cola
19th Sep 2017, 4:56 PM
Mubashir Ahmed
Mubashir Ahmed - avatar
+ 5
Try to add background-repeat: no-repeat;
19th Sep 2017, 11:41 AM
Calviղ
Calviղ - avatar
+ 5
like how @chinthana kavinda
19th Sep 2017, 3:43 PM
Murrah
Murrah - avatar
+ 5
How to add an image/logo on a header? ?
20th Sep 2017, 9:37 AM
CSK
+ 4
yeah..try change browser and tell us
20th Sep 2017, 4:32 PM
Murrah
Murrah - avatar
+ 4
code is working fine now so whats the problem?
20th Sep 2017, 5:21 PM
Mubashir Ahmed
Mubashir Ahmed - avatar
+ 4
congrats 👍
20th Sep 2017, 5:25 PM
Mubashir Ahmed
Mubashir Ahmed - avatar
+ 3
difference html html5
19th Sep 2017, 6:10 PM
Jeyakumar
+ 3
si tu veux une background comme color fait comme ca background-color:blue;
19th Sep 2017, 11:58 PM
Moumouh alouit
Moumouh alouit - avatar
+ 3
@Dave u can watch anime on lots of sites but yeah kissanime is best 😂
20th Sep 2017, 1:27 PM
Mubashir Ahmed
Mubashir Ahmed - avatar
+ 3
@krishna her problem is that her screen is blank white and nothing appears
20th Sep 2017, 4:18 PM
Mubashir Ahmed
Mubashir Ahmed - avatar