背景の画像の右側に黒い枠線があり、輪郭の画像が中心から外れている

Question

フロントエンド開発の新機能。私は試行錯誤してこのバグを修正しようとしています。私のページを調べると、すべてがうまく見えます。私がモービルの携帯電話で私のページをテストするとき、私は私の背景イメージの右側にこの黒いバーが表示され、私のプロフィールの写真は中央から外れています。 "表紙画像;" "バックグラウンド・サイズ" のためにグレー表示される -

ここに私のhtmlコードは次のとおりです。

<div class="container-fluid"> 
<div class="cover-image"> 
<div class="quote"> 
"Prepare Today For The Wants of Tomorow." <br>- <span style="font-size:  .65em;">Aesop</span> 
</div> 
</div> 
<div class="container-fluid"> 
<div id="about" class="row"> 
<div id="profile-pic" class="col-md-5 col-md-push-1 col-xs-8 rounded-img text-center"> 
<div id="text-content">Circuit de Catalunya Montmelo<br>Barcelona, Spain</div> 
    </div> 
    <div id="about-content" class="col-md-7 col-md-push-2 col-xs-12"> 

私のCSSコード：

.cover-image { 
    position: relative; 
    z-index: 1; 
    background: #D3D3D3 url("../images/surfers.jpeg"); 
    background-position:center;; 
    background-size: cover-image; 
    background-repeat: no-repeat; 
    width: 105%; 
    height: 500px; 
    overflow: hidden; 
    padding: 0; 
    opacity: 0.9; 
    } 

Answer 1

が、ここで間違っている可能性があります私はあなたが探しているプロパティは "カバー"ではなく、 "カバーイメージ"であると思います。

Answer 2

は、それをグレーアウト影響を与える可能性がある、余分なセミコロンを持っているように見えますbackground-size: cover;

上記の構文エラーをtheresの。これを取り除き、background-size: cover-image;の代わりに上記の行を実行してください。それはまったく有効ではありません。

また、試みることができる：

background-image: contain;