背景画像がブラウザに完全に表示されず、モバイルでも最悪になる

Question

1. 私の主な背景画像は画面の解像度に適応しますが、画像が途中で途切れてしまい、結果として完全な画像が表示されません。

2. 画像は、モバイル/タブレット上でも最悪である（さらにカットオフ）

はどのようにして全体像を示し、フルスクリーンの解像度のためのすべてのブラウザ/モバイル/タブレットに適応させるのですか？

コーディングを変更する場所がわからない。

このコードは問題になりますか？

* 28.0 Section 
 
*/ 
 

 
.magee-section { 
 
    position: relative; 
 
    -webkit-background-size: cover; 
 
    -ms-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
.fullheight { 
 
    min-height: 100vh; 
 
} 
 

 
.verticlemiddle { 
 
    display: table; 
 
    width: 100%; 
 
} 
 

 
.magee-section.verticlemiddle .container, 
 
.magee-section.verticlemiddle .container-fullwidth { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
.magee-section .background-media, 
 
.magee-section .background-overlay { 
 
    position: absolute; 
 
    width: 100%; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    overflow: hidden; 
 
} 
 

 
.magee-section .background-media { 
 
} 
 

 
.magee-section .background-overlay { 
 
} 
 

 
.magee-section .container, 
 
.magee-section .container-fullwidth { 
 
    position: relative; 
 
    overflow: hidden; 
 
}

Answer 1

body { 
    background: url("a.jpg") no-repeat center center fixed; 
    -moz-background-size: cover; 
    -webkit-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

とHEADにビューポートを追加することを忘れないでください：ここでは

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

はフィドルです：https://jsfiddle.net/668j8xr8/

Answer 2

は親切に、このリンクをチェックし、それは確かにあなたを助けるでしょう：http://www.w3schools.com/css/css_rwd_images.asp