1. ホーム
  2. html

[解決済み] CSS背景のストレッチとスケール

2022-03-15 13:59:38

質問

CSSで背景を伸縮させて、コンテナいっぱいに表示させる方法はありますか?

どのように解決するのですか?

モダンブラウザの場合、これを実現するために background-size :

body {
    background-image: url(bg.jpg);
    background-size: cover;
}

cover は、画像を縦または横に引き伸ばすことで、決してタイルや繰り返しにならないようにすることを意味します。

Safari 3 (またはそれ以降)、Chromeでは有効でしょう。 オペラ 10以上、Firefox 3.6以上、Internet Explorer 9(またはそれ以降)です。

それ以下のバージョンのInternet Explorerで動作させるには、以下のCSSを試してみてください。

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";