Problem with background-image accessing from google browser Chrome on mobile

Question

I’m having problem with my background image on my page but only accessing from mobile by Chrome or mobile default browser, Mozilla Firefox phone works perfectly.

body{
    background-image: url('/assets/img/background.jpg');
    background-position: top center;
    background-repeat:  no-repeat;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size:  cover;
    max-width: 100%;
    width: auto;
    height: auto;
    overflow: hidden;
    display: block;
}

You can access my page here to check https://anacvignola.github.io/

and the complete code here https://github.com/anacvignola/anacvignola.github.io

Answer 1

Ana most likely your problem is why you did not put a height with value on body and in the html

Try to put it this way that should work in other browsers.

OBS: I left some comments in the code.

html {
    height: 100%; /* coloque uma altura no html também */
}

body{
    background-image: url('/assets/img/background.jpg');
    background-position: top center;
    background-repeat:  no-repeat;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size:  cover;
    max-width: 100%;
    /* width: auto; romava esse width */
    /* height: auto; não use "auto" coloque um valor de100% ou 100vh */
    height: 100%;
    overflow: hidden;
    display: block;
}

Here is a simple test for you to do. In steps, take the height of HTML, then change the height of body of auto for 100% and you’ll see how they behave.

html {
  background-color: red;
  height: 100%; /* se vc não colocar aqui 100% o body fica sem altura e não pega a cor */
}
body {
  background-color: blue;
  height: auto; /* tire "auto" e coloque 100% para o body pegar a cor; */
  
}