Responsible on the PC but not on the tablet or mobile phone

Question

Responsible on the PC but not on the tablet or mobile phone

Navigation

#1 by (1 votes)

2

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

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

html css

asked by anonymous 24.03.2018 / 10:54

1 answer

My code in C contains some errors (Data Structure List) Link Anchors, how to let it open in a certain position of the page

score 1 · Accepted Answer

For the background to be 100% tall you also need to set the height in the HTML. I also suggest using background-size as cover . Link to documentation: link

In this example below you can see that the image always has 100% of the height occupy 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;
}

Image of the result in Chrome DevTools simulating background on mobile.