Skeletonボイラープレートを使用してWebサイトを作成し、モバイルユーザーが応答して利用できるようにしました。連絡先ページを除くすべてのページには全幅の背景画像がありますが、背景画像として設定されていません.imgタグです。負のマージンを重ねます。
その理由は次のとおりです。
- 全幅とコンテンツにする必要があります。スケルトンのボイラープレートには左右の余白があるため、コンテンツに背景画像を設定できません。
- また、div を含む画像が常に画像の全高になるようにする必要がありますが、画像の高さは設定されたサイズではなく、ブラウザーの幅に対応し、アスペクト比を維持します。
- 画像は、画像を斜めのスキャンラインでオーバーレイする透明なタイル張りの背景を持つ別の div に含まれています。これはデザインに必要であり、古いブラウザーをサポートしたいので、まだ CSS3 複数の背景画像を使用したくありません.
- 画像を必要以上に大きくしたいのですが（今は少し大きすぎることに気づきました）、より大きな解像度のモニターでも許容できる品質になるようにします。
今はむしろ負のマージンを使用したくありません。それらが有効なコードであることは知っていますが、過去にそれらの幅に問題があり、それらなしで同じ結果を達成する他の方法があるのではないかと思っていましたか?
img background 要素で絶対配置を使用しようとしましたが、Firefox は不明な理由でドキュメントの先頭に大きな空のスペースを追加し、ページ全体をおそらく 200px 押し下げます。
ウェブサイトは www.f3racing.co.uk です。