縮小時に背景画像が中央を中心に右側と左側から均等に見えなくなっていくようにしたい。

###実現したいこと

isaraの模写を行っております。画面の縮小時に背景写真の左側の部分は全く変化せず
右側からのみ見えなくなっていくのですが、
それをisaraの本物のサイトのように縮小時に背景画像が中央を中心に
右側と左側から均等に見えなくなっていくように変えたいです。
どのように実現すればいいのでしょうか？？よろしくお願いいたします。
(下のコードのcssでtitleクラスに指定したbackground-imageが背景画像です。)

上の画像が実際のもので、下の画像が模写しているものです。

該当のソースコード

html
1<div class="title">
2   <h1>
3     <p class="title-context">プログラミングで<br>人生の安定を手にいれよう</p>
4     <img class="title-img" src="../img/isaralogolarge.png" alt="">
5     <p class="title-main">バンコクのノマドエンジニア育成講座<br>
6         　　　　　　　　　　iSara[イサラ]</p>
7   </h1>
8</div>

css
1.title-img{
2    width:28%;
3    height:auto;
4}
5
6.title-context{
7    line-height:4rem;
8    padding-top:5rem;
9    font-size:2rem;
10}
11
12
13.title{
14    background-image: url(../img/main.jpg);
15    background-repeat:no-repeat;
16    padding-bottom:5rem;
17    background-size: cover;
18} 
19
20.title-main{
21    padding![イメージ説明](70527ad57eefb9e06e4c7c37e6daba27.jpeg)rem;
22    font-size:1.2rem;
23}

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

回答1件

ベストアンサー

background-position: center;を追加すればいいでしょう。

css
1.title{
2    background-image: url(../img/main.jpg);
3    background-repeat:no-repeat;
4    padding-bottom:5rem;
5    background-size: cover;
6    background-position: center;
7}