Responsive on PC but not on tablet or mobile phone

Question

background-image: url("../assetsimages/book.jpg");
background-size: 100% auto;
background-repeat: no-repeat;
max-width:auto;
height: auto;

As you can see on tablet and mobile phone is not responsive and do not understand why.

Answer 1

For the background to be 100% height you also need to set the height in HTML. I also suggest using the background-size as cover. Link to the documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

In this example below you can see that the image always gets to 100% height occupies the width of the device without losing the "ratio"

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    background-image: url(https://www.digitaltrends.com/wp-content/uploads/2012/04/open-book.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

Screenshot of the result in Chrome Devtools simulating the background on mobile device.