Web ページに合わせて背景画像を引き伸ばす方法

背景グラフィックで Web サイトに視覚的な興味を持たせる

知っておくべきこと

• 推奨される方法: CSS3 プロパティを使用します。 背景サイズ そしてそれをに設定します カバー .
• 別の方法: CSS3 プロパティを使用して 背景サイズ に設定 100% と 背景位置 に設定 中心。

この記事では、CSS3 を使用して Web ページに合わせて背景画像を引き伸ばす 2 つの方法について説明します。

現代のやり方

画像は魅力の重要な部分です ウェブサイトのデザイン .それらはページに視覚的な興味を与え、探しているデザインを実現するのに役立ちます。背景画像を扱う場合、ページに合わせて画像を引き伸ばしたい場合があります。 幅広いデバイスと画面サイズ .

要素の背景に合わせて画像を引き伸ばす最良の方法は、 CSS3 プロパティ、 背景サイズ に等しく設定します。 カバー .

|_+_|

上記の例を 背景サイズ に設定 100% 代わりに、CSS がほとんど同じに見えることがわかります。

全画面ブラウザまたは画像と同様のサイズのブラウザでの結果は、ほぼ同じです。ただし、画面が狭くなると、欠陥が現れ始めます。

明らかに理想的ではありませんが、フォールバックとして機能します。

によると caniuse.com 、このプロパティは IE 9 以降、Firefox 4 以降、Opera 10.5 以降、Safari 5 以降、Chrome 10.5 以降、およびすべての主要なモバイル ブラウザーで動作します。これは、現在利用可能なすべての最新のブラウザーを対象としています。つまり、誰かの画面で機能しないことを恐れずに、このプロパティを使用する必要があります。

これら 2 つの方法を使用すると、ほぼすべてのブラウザーをサポートするのに問題はありません。として background-size: カバー ブラウザの間でさらに受け入れられるようになると、このフォールバックでさえ不要になります。明らかに、CSS3 およびよりレスポンシブなデザイン プラクティスは、HTML 要素内のアダプティブ バックグラウンドとして画像を使用することで簡素化および合理化されました。