Problem with background-image accessing google chrome browser on mobile

Question

Problem with background-image accessing google chrome browser on mobile

Navigation

#1 by (1 votes)

2

I'm having trouble with my background image on my page but just by accessing the mobile from Chrome or the default mobile browser, Mozilla Firefox from the mobile 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 link

and the full code here link

html html5 css css3 twitter-bootstrap

asked by anonymous 09.04.2018 / 19:50

1 answer

how to take the value of each input and play each one in a variable Login error while trying to upload Android Studio project to GitHub by IDE [closed]

score 1 · Accepted Answer

Ana most likely your problem is because you did not put a height with value in body and 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 out height of HTML , then change height from auto to 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; */
  
}