Geek Answers Handbook

The background image on the mobile phone does not fit the screen correctly

I had a problem with my site, a page that was naked with me in French, but, fortunately, the code is the same with all languages. I use the Samsung Galaxy S5 to view the page, and it has a large black box.

You can view the source page here . You can see everything is good on your desktop. Now what happens on my Galaxy S5 (sorry for the large image, you don’t know how to reduce it on Stack Overflow)

image problem

In any browser from a computer or iPhone / iPad, this is normal, but on my Galaxy S5 the background image is shown below and there is a black bar on top.

Now the code that I have works fine on the desktop / iPad / iPhone.

body{ margin:0; padding:0; font-size:13px; font-family:"Arial Black", Gadget, sans-serif; color:#FFFFFF; background-image: url('http://www.impotsuzannedelorme.com/images/cloud.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; }

I'm not sure what I am missing, if a css guru can help me, I would really appreciate it.

Thanks.

+6
source share
5 answers

background-attachment:fixed is not yet supported on mobile chrome (version 47) and is likely to interfere with background-size:cover (this is correctly supported); check out http://caniuse.com/#feat=background-attachment .

In addition, in some versions of Safari for iOS, a combination of these two things (size cap + fix) is known to cause artifacts (see http://caniuse.com/#search=background-size , tab for known issues). It probably won’t even work on iPad 2, and it probably won’t work on iPad 1.

This suggests that you have several options to have a fixed background and scrollable content:

  • Use the div for the background and the scrollable div for the content as follows: https://jsfiddle.net/6r3pobys/2/

  • Use the image in the body with background-size:cover as it is at the moment, remove the background-attachment:fixed and use the div scroll from the previous point: https://jsfiddle.net/s22qsg55/2/ . Keep in mind that in this case you need to set height:100% to the HTML element!

You can see your webpage with the latest approach here: https://jsfiddle.net/t9kpgjqr/2/ . I created a supercontainer div that contains fragments of your body and footer.

+7
source 
 background-repeat:no-repeat; background-size:auto;

if you use this code, it should work.

say that this awning is correct for the award

0
source

Have you tried to set the maximum height for your navigation bar? Does the navigation bar have anything other than navigation? If so, whatever it may be, there may be a click.

Some HTML / CSS code would be helpful!

Hope this helps!

0
source

Try:

 background-size: contain; background-position: center; background-repeat: no-repeat;

Provides a cleaner result. I am using a web service that takes the width of the image as a parameter and returns an image with the correct size for the element.

0
source

If you can't use CSS , try JS . The style of the first initialization style,

 img{ background: fixed; margin: 0px; }

and set the identifier for the img = imgId tag . Now, in the script , add this,

var id = document.getElementById ("imgId");

id.style.height = screen.height;

id.style.width = screen.width;

0
source

More articles:


All Articles