BG image on phone is not resizing

Question

I tried to do this:

@media only screen and (max-width: 500px) {
    body {
        background: url("http://popidesigns.ro/images/bgtel.png") no-repeat center center fixed;
    }
}

With the new picture @ 1080x1920(normal it was 1920x1080) But no change. How can I make the BG Pic visible on the whole phone screen? (the bg image is that thing above the logo)
phone ss

laptop ss

Answer 1

add background-size: cover to fill the container/body

...and make sure the body is at least 100% high by adding

html, body {
  height: 100%;
}

Answer 2

See if this helps you: https://codepen.io/panchroma/pen/KyrvOP

CSS

html, body {
  height: 100%;
}

@media screen and (max-width: 500px) {

  body{
  background:url('http://popidesigns.ro/images/bgbgb.png') no-repeat;
  background-size:cover;
  }
}  

I also added a viewport meta tag in the head of the page

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 3

body{
    background: URL("http://popidesigns.ro/images/bgtel.png") no-repeat center;
    background-size: cover;
    width: 100%;
}

This will make sure that the image doesn't repeat and is centered. The background-size:cover; will ensure that the image will cover the entire screen. width at 100% helps with that.