html background image resizing when keypad opened in mobile browser

Question

below is my code. I have text box on the page when I try to enter some text in its background image size is doubling. how to solve it?

body{
  margin: 0px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  min-height: 100vh;
  background-position: center;
  -webkit-background-size:cover; background-image: url("../src/images/highway.jpg");
  background-attachment: fixed;
  overflow-y: auto !important;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

@media (max-width: 991px) {

  body{

    -webkit-background-size:100% 100%;
    background-size: 100% 100%;
    background-position: center;
    background-image: url("../src/images/highway-m.jpg");
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
  }

 }

you use cover then expand image for cover width of page please edit your question and add full code — MBadrian, Feb 09 '20 at 05:21
this helps https://stackoverflow.com/questions/26372127/background-fixed-no-repeat-not-working-on-mobile — ravi, Feb 09 '20 at 05:39

score 0 · Answer 1 · answered Feb 09 '20 at 07:12

0

give the text box height and overflow:hidden

answered Feb 09 '20 at 07:12

madi.wd

148
1
3

html background image resizing when keypad opened in mobile browser

1 Answers1