背景画像が正しく配置されない

Question

背景画像が画面サイズに比例して適応し、ナビゲーションバーに浮かないように、背景画像を配置しようとしています。私が使用しているCSSは次のとおりです。ここで

#apology{ 
background-image:url('http://i.imgur.com/jkXf9IE.png'); 
width:50%; 
margin:0 auto; 


background-position:50% 50%; 
background-size:cover; 


position:fixed; 
left:10%; 
top:10%; 
right:10%; 
bottom:10%; 

} 

は background-image

Answer 1

何かthisのようなもの？

#apology{ 
    background-image:url('http://i.imgur.com/jkXf9IE.png'); 
    margin:0 auto; 
    background-position:50% 50%; 
    background-size:cover; 
    position:fixed; 
    top:50px; 
    bottom: 0; 
    left: 15px; 
    right: 15px; 
} 

すべての場合にバッジを完全に表示したい場合は、ブラウザウィンドウが実際に狭い場合でも、イメージを変更する必要があります。透明な背景にバッジを付けてpng画像を作成し、cssの背景色として青を追加します。

Answer 2

更新トップのcssは、ない作業の割合

#apology { 
    background-image: url(http://i.imgur.com/jkXf9IE.png); 
    width: 50%; 
    margin: 0 auto; 
    background-position: 50% 50%; 
    background-size: cover; 
    position: fixed; 
    left: 10%; 
    top: 52px; //update this 
    right: 10%; 
    bottom: 10%; 
} 

とピクセルとそれを固定フィドルだjsfiddle

Answer 3

）1.幅とマージンは、固定位置とその上下左右のパラメータと矛盾します。それは要素そのものです。

2.）バックグラウンドの位置はcoverと矛盾します。 background-position:50% 50%;は、背景画像の左上隅をコンテナの中央に配置します。これはあなたが望むものではありません。ちょうどそれを消して使用してくださいbackground-size: cover;とbackground-attachment: fixed