背景画像がモバイル版にて伸びてしまう現象を改善したい

現在背景画像を指定し、画像のような仕上がりにしたいのですが、元々の画像が大きいため、モバイル版に背景画像として表示すると伸びて表示が荒くなってしまいます。
ｃｓｓにて見本のように画像を表示する（元々の画像のサイズで、スマホ版ではその一部分を表示するような表現）プロパティがあればご教授いただきたいです。
なお、画像の表示はJavaScriptにてsrc属性を指定しています。

html
1    <div class="background-image">
2      <img src="" alt="" class="background-image__main" id="mainImage">
3      <img src="画像/logo-white.png" alt="ロゴ" class="background-image__white-logo">
4    </div>

css
1.background-image{
2  height: 100vh;
3  width: 100vw;
4  background-size: cover;
5  background-position: center;
6}
7.background-image__main{
8  height: 100vh;
9  width: 100vw;
10}

行動規範の内容に同意します

回答1件

こちらでいかがでしょうか?

[1] 背景画像を<img>で表示する場合 (HTMLに手を加えない場合)

CSS
1.background-image {
2  height: 100vh;
3  width: 100vw;
4  /* background-imageを指定していないため不要 */
5  /*
6  background-size: cover;
7  background-position: center;
8  */
9  
10  /* 追加: ロゴを上下左右中央配置 */
11  position: relative;
12}
13.background-image__main {
14  /*
15  height: 100vh;
16  width: 100vw;
17  */
18  height: 100%;
19  width: 100%;
20  object-fit: cover;
21}
22
23.background-image__white-logo {
24  /* ロゴを上下左右中央配置 */
25  position: absolute;
26  top: 0;
27  right: 0;
28  bottom: 0;
29  left: 0;
30  margin: auto;
31  width: 200px; /* 好きな値を設定してください */
32  height: auto; /* 好きな値を設定してください */
33  
34  /* ロゴを前面に表示 */
35  z-index: 1000;
36}

[2] HTMLにも手を加える場合

HTML
1    <div class="background-image">
2      <!-- 不要なので削除 -->
3      <!--<img src="" alt="" class="background-image__main" id="mainImage">-->
4      
5      <img src="画像/logo-white.png" alt="ロゴ" class="background-image__white-logo">
6    </div>

CSS
1.background-image{
2  height: 100vh;
3  width: 100vw;
4  background-size: cover;
5  background-position: center;
6  
7  /* 追加 */
8  background-image: url(画像のパス.jpg);
9}
10
11/* 不要なので削除 */
12/*
13.background-image__main{
14  height: 100vh;
15  width: 100vw;
16}
17*/