html - css-背景が広すぎる

Question

私のcssウェブサイトの小さな問題。PSデザインをhtml5およびcss3サイトに変換していますが、ページの上下の背景画像が大きすぎます（1600px）。サイト全体のルックアンドフィールを維持したい場合はどうすればよいですか？

Answer 1

以下のようにcssを作成します

body, elementID, elementClass{
    margin: 0px;
    width: 100%;
}

ユーザーの画面解像度に関係なく、ページ、div、またはコンテナーが画面に収まります。

Answer 2

あなたの質問がもう少し明確であれば素晴らしいことですが、ここに行きます：

Web サイトの表示方法は、訪問者が使用している画面の解像度に大きく依存します。たとえば、ユーザー A の解像度が 1920 x 1080 であるとします。これは、Web サイト全体を簡単に見ることができることを意味します。別のユーザーは 1024 x 768 しか持っていないかもしれませんが、これは明らかに 1600 ピクセルすべてを表示するには十分な大きさではありません!

これを回避するには、サイトのデザインに大きく依存します。背景は繰り返し可能なもの (グラデーションなど) ですか、それともスカイラインなど少しトリッキーなものですか?

単純な場合は、CSS を使用して背景を水平方向、垂直方向、またはその両方で繰り返すことができます。

また、CSS (トップ センターなど) を使用して背景を配置することもできます。これにより、背景が中央に配置され、中央部分が表示されたまま、画面の側面にかかるエッジが切り取られます。

CSS3 では、背景がどのように反応するかを定義できる「background-size」というプロパティも取得します。これにはいくつかの値があります。これらは次のとおりです。

• cover - 画像全体がコンテナー内に収まるようにします (画像全体が見えるようにします)。
• 含む- これにより、イメージがコンテナー全体に収まるようになるため、コンテナーの一部が表示されない場合があります。
• 次元 x 次元- 値/パーセンテージを指定すると、最初の値/パーセンテージが幅になり、2 番目の値/パーセンテージが高さになります。1 つしか指定されていない場合、それが幅に使用され、高さは auto に設定されます。

background-size はすべてのブラウザーでサポートされているわけではないことに注意してください。

background-size のデモ: http://davidwalsh.name/demo/background-size.html