2016-06-28 41 views
1

私は800x480ピクセルの背景画像を持っています。私の要素が固定サイズであるとき、私は背景画像を見るが、要素が相対的な大きさか最大幅を持っているのではない。私は背景画像を表示するために何ができるCSS:要素の相対的なサイズにより、背景画像が消える

.audio-container, .settings-container { 
    width:100%; 
    /* Same result with max-width */ 
    height:100%; 
    position:absolute; 
    background-image:url("../../public/images/Audio/I_Audio_BGK.png"); 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
} 

を示していない背景画像と

ワーキングCSSスクリプト

.audio-container, .settings-container { 
    max-width:800px; 
    height:480px; 
    position:absolute; 
    background-image:url("../../public/images/Audio/I_Audio_BGK.png"); 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
} 

CSSスクリプトは、まだ要素がへの相対的なサイズ持っていますブラウザウィンドウ?以下のCSSで

<div class="settings-container"></div> 

は要求することで、ここではここ

<div ng-controller="MainController" class="main-guy"> 
    <div class="screen-inside"> 
     <div class="audio-container" ng-controller="AudioController"> 
     </div> 
    </div> 
</div> 

には、次のHTMLを使用して、親DIVのCSSスタイル

.main-guy { 
    position:absolute; 
/* Same result if width and height are set to a fixed number */ 
    width: 100%; 
    height: 100%; 
    margin: auto; 
} 
.screen-inside { 
    margin:auto; 
    position:relative; 
    height:60%; 
    width:66.66%; 
} 
+0

は、問題を実証助けるためにあなたのHTMLコードを記載してください。あなたの2番目の(動作しない)例では、どの祖先が幅と高さを決定しますか?私。何の100%? – showdev

+0

'position:absolute'を' position:relative'に変更しても動作します。 –

+0

@ M.Tanzil理由を説明するのに気をつけますか? – showdev

答えて

1

あなたは.settings-containerためChildこの場合の行為にあなたのイメージとしてposition:relative.settings-containerposition:absoluteを変更する必要があり、画像がその親に応じなければなりません。だからPosition:absoluteは動作しません。

チェックスニペット

.main-guy { 
 
    position:absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: auto; 
 
    background:#999; 
 
} 
 
.screen-inside { 
 
    margin:auto; 
 
    position:relative; 
 
    height:60%; 
 
    width:66.66%; 
 
    background-color:blue; 
 
} 
 

 
.audio-container, .settings-container { 
 
    width:100%; 
 
    /* Same result with max-width */ 
 
    height:100%; 
 
    background-image:url(http://reservations.life/css/images/bg-01.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    position:absolute; 
 
}
<div ng-controller="MainController" class="main-guy"> 
 
    <div class="screen-inside"> 
 
     <div class="audio-container" ng-controller="AudioController"> 
 
     </div> 
 
    </div> 
 
</div>

1

ある親のdiv要素です:

html, body { height: 100%; margin: 0; padding: 0; } 

.settings-container { 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    background-image: URL("your-image-here"); 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

背景がビューポートの幅と高さの100%を占めます。画像全体を見ることなく質問を正しく解決するのは難しいですが、文書内に別の場所にheightを適用する必要があります。

position: absoluteを使用しても問題が発生する可能性がありますが、これはサイト/アプリケーション/その他にどのように適用しているかという広範なイメージに大きく左右されます。