2016-05-10 5 views
1

background-attachmentfixedに設定されていると、背景画像に関する質問があります。これらは:バックグラウンドの添付ファイルはどのように固定されますか?

  1. 背景画像を幅500pxと高さ500pxのdivに設定し、1pxの赤色の境界線を設定するとします。今私がbackground-size: 100% 100%を与えれば。背景画像のサイズが500ピクセルよりわずかに大きいのはなぜですか?ビューポートのサイズを変更すると背景画像のサイズが変わるのはなぜですか?

  2. 背景の画像に最小の高さを割り当てて、画像のサイズを変更したときに背景画像が特定の高さより小さくならないようにするにはどうすればよいですか?

+0

これらの質問のどちらもが何かを持っていますバックグラウンドアタッチメントと関連付ける彼らはバックグラウンドサイズです。 – BoltClock

+0

@BoltClock 'backgrounder-attachment:fixed'を削除した場合、バックグラウンドイメージは、' background-size:100% 'の代わりにビューポートに対して相対的な幅と高さを取らないので、コンテナの幅は100%になります。 – user31782

+0

また、これは2つの無関係な質問です。さて、別の質問。彼らは別々の質問で良いでしょう。 –

答えて

0
  1. 境界は画像の一部と考えられているので、あなたの画像は500pxなどよりも僅かに大きいです。この方法を使用すると、背景画像は502x502になります。

  2. あなたの背景には最大幅と最大高さを割り当てることができるので、画像は選択されたピクセル数より小さくなることはありません。私は、ビューポートのサイズを背景画像の変更のサイズを変更しないのはなぜ

これは、イメージサイズを%で設定したためです。 %属性は親の%サイズを取っています。私たちの場合、親はビューポートです(vhvw)、ビューポートサイズを変更するとサイズが変わります。

+0

私が間違っている場合は私を修正しますが、私はあなたが背景画像に最大幅も最大高さを設定することはできないと思います。スタイリネスプロパティではなく、AFAIK –

+0

OPの問題は、バックグラウンド画像のサイズが '%'で測定されたときに、バックグラウンド画像が表示されている場合、ビューポートのサイズ(要素のサイズではありません)固定されている。私の[フィドル](http://jsfiddle.net/MrLister/3b8kroar/1/)も参照してください。 –

+0

@CraigWayneできることは確かです。メディアクエリを使用します。 –

1

背景body要素にfixedその相対ある場合divより大きい幅100% 100%結果の設定サイズは、どの画像が適用される理由、すなわち。それはwidthではなく、divと同じです。

あなたが固定heightを設定したい場合は、あなただけのpxで設定する必要がありますが、この場合の画像は、その比率は保存されませんより:

div { 
 
    background: url(//c6.staticflickr.com/8/7389/26907631325_f8b05bb68d_c.jpg) fixed left top/100% 433px no-repeat; 
 
    width: 800px; 
 
    height: 433px; 
 
} 
 

 
html { 
 
    height: 10000px; 
 
}
<div> 
 
    
 
</div>

+0

どうして?バックグラウンド_attachment_を変更するとバックグラウンド_size_が変わるのはなぜですか?これはバグを襲う。 –

+0

@Mr Lister:https://www.w3.org/TR/css3-background/#background-positioning-areaを参照してください。 – BoltClock

+0

@Mrそれはどのように動作しますか?固定されていれば、それは本体'、要素が' position:fixed; 'を持つように – t1m0n

関連する問題