2016-10-21 5 views
0

「ズームイン」を取得します。背景画像は、私はこのようになります。この赤の背景画像を持っている

enter image description here

を画像のサイズは344px * 1800:私はCSSで背景画像としてこれを追加するときしかし、私は実際にズームし、それがすべてで良い見ていない取得します。ここで誰かがbackground-size:contain;を使うことを提案しました。しかし、これは背景を全く示さないことで終わる。ここで

はHTMLです:

<section id="aboutprocess"> 
     <div class="row"> 
      <div class="col-md-8 col-md-offset-2"> 
       <p class="text-center">Our agile team continuously delivers working software and empowers your organization to embrace changing requirements.</p> 
       <button type="button" class="btn btn-default center-block blue">more</button> 
      </div> 
     </div> 

    </section> 

とCSS:デザインファイルに示すように

   #aboutprocess { 
         margin-top: 64px; 
         padding: 64px 0; 
         background: url(../img/tech_bg.jpg) no-repeat center center fixed; 
         width: 100%; 
         height: 344px; 
         background-size: cover; 
        } 

にはどうすれば同じ結果を達成することができますか?助けてくれてありがとう。

+0

あなたはこれのためにjsfiddleを提供できますか? –

+0

'background-size:contains'はあなたが望むものです。この変更だけであなたの背景が完全に消えてしまうと言うと、私はそれを信じません。 –

答えて

2

カバーする背景サイズが設定されています。ウィンドウサイズの大きさや大きさに基づいて、画像を画面のサイズに伸縮させます。使用するのに最適なのは、このシナリオで画像の外観が表示されていることを繰り返すことができると信じているので、次のCSSを試してみてください。

#aboutprocess { 
        margin-top: 64px; 
        padding: 64px 0; 
        background: url(../img/tech_bg.jpg) repeat center center fixed; 
        width: 100%; 
        height: 344px; 
        background-size: contain; 
       } 

希望します。