CSSの背景画像

Question

私はアーティストのためのプロジェクトに取り組んでいます、プロジェクトは私に設計が完了したとして渡されました。私は.psdファイルでデザインを受け取りました。サイズは正確には2504px x 1781pxです。

パターンとグラデーションがたくさんあるので、イメージをどのように設定するかについては少し不安です。私はイメージをオンラインにしました。まず、より現代的な画面サイズに合うようにサイズを変更することです。

画像が添付されています。画像の管理方法に関する助言やご提案は大変ありがとうございます。あなたが背景画像として（「古いスタイル」道）（グラッセで、ヘッダ、右側の列、フッタ）部分の画像やuse'emを分割することができ

乾杯

Answer 1

これは、アスペクト比が非常に柔軟ではないため、ワイドスクリーンモニタでストレッチするときれいに見えません。

おそらく、画像の複数のバージョン（サイズが異なる）を作成し、html5やjavascriptのテクニックを使用して、適切な画像を訪問者に提供します。

私はバックグラウンドイメージとしては使用しませんが、コンテンツの残りの部分の後ろにdivと入れて、そのdivとイメージを100％幅にすることができます。左下隅に配置すると、最も重要な部分（フレーム）が常に見やすくなります。

私はあなたのために、モバイル版のブラウザを縦置きにする必要はありません。

Answer 2

divのために。私はPhotoshopの組み込み機能を使用して、「ウェブサイト用に保存」を使用して、画像を最適化して（Jpegとして）、「小さいファイル - 最良の外観」（中間（50または60）の品質、複数の通過のotpimizationおよび1000 px幅）。 固定レイアウトを維持したい場合にこれを行います。

Answer 3

ウェブサイトはどのような解像度に設計されていますか？

画像サイズを1280px（911pxの高さ）に変更すると、1024x768のブラウザウィンドウサイズでうまく動作することがわかりました。これは、誰でも最近使用することになる最小限のものです。このCSSで

：

。..画像の主要部分は、（人がフレームを保持）は常にビューになり、より大きなブラウザのビューポートは、の上と右の部分の多くを得るだろう画像。

ただし、 1280pxを超えるブラウザを使用している場合は、プレーンブラックの背景色が表示されます。

編集：自動的にブラウザのビューポートに合わせて画像をストレッチ/縮小されますCSS3プロパティbackground-size: 100%;は、もあります。

更新：私はPNG-8が私に上記の解像度のための最高の品質対ファイルサイズを与えたことがわかりました。それは280KBで現れましたが、同等の品質のJPGは330KBの範囲でした。

Answer 4

画像と同じ縦横比の固定サイズのレイアウトを使用し、レイアウトと同じ寸法に画像のサイズを変更することを検討してください。背景色を画像と同じ黒または補色に設定することができます。

約1000px * 700pxのレイアウトは、ほとんどのコンピュータディスプレイでうまく機能します。

フレキシブルなレイアウトが必要な場合は、イメージのコンポーネントを分けることができれば本当にいいです（すべてのレイヤーを持っていますか？）。すなわち、フレーム/人々、コーナーの赤い花のデザイン、交差したバンドの背景。

次に、いくつかのdivといくつかのjavascriptを使用して、フレームと手が左下隅の位置に固定されたままにしておくと、花のデザインは常に四隅に引き寄せられ、背景が動いてフレームを暗闇に保ちます対角領域。赤いバンドに沿って右にスライドするようなもの。 （私はそれを私の頭の中で見ることはできません。記述するのは難しいです。）