Is there anyway to make my body background image to be responsive in any mobile view? Especially when the height is 412x980? I know how to use some proper background cover
body {
background: url(../../something.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
But I wanted to not use fixed because I need to stay all elements on that background image.
EDIT:
After using @VIKESIR provided code, I still getting whitespace after trying to resizing every mobile views, I got the mobile view sizes 
CodePudding user response：
By default body height is nothing, so we need to define height. Here is some css except body tag in last one, that you can configure in every style.css when you create new stylesheet.
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
box-sizing: border-box;
}
body {
background-color: #fa0;
}
.title {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.title h1 {
color: #000;
text-shadow: 1px 1px 0px #fff;
text-align: center;
}
@media (max-width: 479px) {
body {
background: url(https://www.psdstack.com/wp-content/uploads/2019/08/copyright-free-images-750x420.jpg) no-repeat center / cover;
width: 100%;
min-height: 100vh;
}
}<body>
<div >
<h1>TESTING<br>TESTING TESTING</h1>
</div>
</body>