positionをfixedに設定すると背景画像が消えるのはなぜでしょうか？

Question

width:autoにてpositionをfixedに設定すると背景画像が消えてしまいますがなぜでしょうか？

<div class="header"></div>

.header {
  background-color: rgba(34, 49, 52, 0.9);
  height: 65px;
  position: fixed;
}

Answer 1

div要素に対して絶対配置、もしくは固定配置を行ったとき、widthプロパティ、heightプロパティにautoが設定されていると、要素の内容に合うように横幅や高さが調整されるためです。

ほとんどの時、絶対位置指定要素に height 及び width が auto が設定されると、内容に合うように大きさが調整されます。しかし、非置換要素で絶対位置指定要素は、 top 及び bottom を指定して height を指定しない (つまり auto の) ままにすることで、利用できる垂直の空間を埋めることができます。同様に、 left 及び right を指定して width を auto のままにすることで、利用できる水平の空間を埋めることができます。

参考: position - CSS: カスケーディングスタイルシート | MDN

Comments

[nbweb]

回答ありがとうございます。
正に求めていた回答です！