斜めの背景画像で苦労しています。これは「パターン」ではなく、2 種類のレイアウトで使用される全体像です。(画像: http://i.imgur.com/mcWseu1.jpg )
- 1 つのテンプレートでは、画像はページ上で高さ 100% に固定され、右上に配置され、ページと共にスクロールされます。
- 2 番目のテンプレートでは、画像はテンプレート 1 と同じ縦横比を維持する必要がありますが、固定しないでください。代わりに、ページの残りの部分とともに上にスクロールする必要があります。
テンプレート 1 では望ましい結果を得ることができましたが、テンプレート 2 では苦労しています。
ここでの唯一の解決策はJavascriptですか？もしそうなら、何か推奨事項はありますか？繰り返しますが、私が修正できない課題:
- テンプレート 1 と同じ縦横比を維持するように画像を取得します (テンプレート 1 のウィンドウに合わせて 100% の高さである場合、テンプレート 2 では高さ 100% でサイズ変更する必要があります)。個別のテンプレートを使用してページ間の一貫性を維持します。
助けてくれてありがとう。
編集:私が直面している実際の課題について参照するコードはありません。しかし、最初のテンプレートで見つけた解決策は次のとおりです。
CSS (img 要素に適用):
.abovefold {
width: auto;
height: 100%;
position: fixed;
top: 0;
z-index: -1;
}