I want to make my background image responsive on mobile devices. Various problems arise when i change some properties in the css code. Either the image becomes responsive but it introduces a white space at the bottom and top of the image or else the image does not become responsive at all.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    body {
        background-image: url('hand.jpg');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;

    }
</style>

****

i tried chatgpt but it did not solve my problem. I can’t find the solution on youtube also