バックグラウンドでCSS画像をストレッチおよびスケーリング-CSSのみ

853

ブラウザのビューポートのサイズに応じて、背景画像を伸縮させたい。

Stack Overflowで、たとえばCSSのストレッチやスケーリングの背景など、問題を解決するいくつかの質問を見てきました。うまくいきますがbackground、imgタグではなく、を使って画像を配置したいと思います。

その1つにimgタグが配置され、CSSを使用してimgタグに割り当てられます。

width:100%; height:100%;

それは機能しますが、その質問は少し古く、CSS 3では背景画像のサイズ変更がかなりうまく機能すると述べています。この例を最初に試してみましたが、うまくいきませんでした。

background-image宣言でそれを行う良い方法はありますか？

css  background 
— ファビオ・アンチューンズ
ソース
113
背景サイズ：100％100％;
— Andreas L.
5
たぶん、このデモでは、参考にすることができ：w3schools.com/cssref/...
— ダヴィデ
1
— Alex Angas
@AlexAngas質問の年齢を考慮すべきではありませんか？これは6年前に尋ねられ、あなたが指摘した質問は4年前に尋ねられました。
— ファビオ・アントゥネス
@FábioAntunesIMHO私たちは最良の回答で質問を閉じるのではなく、代わりに重複してリンクすることを推奨します。これはメタで議論されたはずですが、今は見つかりません...
— Alex Angas

回答:

1047

CSS3にはと呼ばれる素晴らしい小さな属性がありますbackground-size:cover。

これにより、縦横比を維持しながら背景領域が背景画像で完全に覆われるように画像が拡大縮小されます。全エリアがカバーされます。ただし、サイズ変更された画像の幅/高さが大きすぎると、画像の一部が表示されない場合があります。

— ヴァシシュタ・ジョギ
ソース
11
Coverは、アスペクト比が一致しない場合に画像をトリミングするため、一般的な解決策としては適していません。
— mahemoff 2013年
1
IEブラウザーで動作させたい場合 -github.com/louisremi/background-size-polyfill
— Wreeecks
4
Firefoxでは動作しないようです。ただし、background-size: 100vw 100vh;トリックはうまく機能します。
— Yannick Mauray、2018年
5
@YannickMaurayトライ：background-size: cover; -ms-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover;
— アミットクマールカレ
2
：あなたはこれをしたい場合は、唯一の横軸のために、この使用background-size: 100% auto; stackoverflow.com/questions/41025630/...
— antoineMoPa
470

CSS3プロパティを使用すると、非常にうまくできます。比率に合わせてサイズが変更されるため、画像の歪みはありません（ただし、小さな画像は拡大されます）。ただし、まだすべてのブラウザに実装されているわけではありません。

background-size: 100%;
— マットバージェス
ソース
19
@nXqdこれでコード全体が完成しました。でコンテナを作成し、background-image上記のプロパティを含めます。先に述べたように、ブラウザのサポートはまだ良くなく、これにはブラウザ固有のバージョンがあります。-webkit-background-sizeetc. W3C CSS3モジュール：background-sizeおよびcss3.info：background-size
— MrWhite
15
画像のアスペクト比を維持するには、「background-size：cover」を使用する必要があります。または「background-size：contains;」。私はポリフィルを構築したことが実装IE8でそれらの値：github.com/louisremi/background-size-polyfill
— ルイ・レミ
4
autoアスペクト比を維持するために追加することもお勧めします。
— Chibueze Opata
186

私が言及したコードを使用して...

HTML

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}

これにより、目的の効果が得られます。スクロールされるのはコンテンツだけで、背景はスクロールされません。

背景画像は、任意の画面サイズでブラウザのビューポートにサイズ変更されます。コンテンツがブラウザのビューポートに適合せず、ユーザーがページをスクロールする必要がある場合、コンテンツがスクロールしている間、背景画像はビューポートに固定されたままになります。

CSS 3では、これははるかに簡単になるようです。

— ファビオ・アンチューンズ
ソース
12
しかし、これは背景画像ではありません。これはブロックに対してのみ実行でき、input [type = text]などのインライン要素に対しては実行できません。それとも私は間違っていますか？
— deerchao
11
class = "stretch"は必要ありません。CSSで識別子として#background img {}を使用してください
— BerggreenDK
z-index：-1; 画像をバックグラウンドで保持します。画像をフォアグラウンドで表示したい場合は、Zインデックス値を増やすか、そのインデックスを削除します。
— gokhanakkurt 2013年
私が抱えている問題はIE8に関するものです。DIVの背景画像は完全に引き伸ばされますが、IE8では画像がDIVの外に出てしまうため、完全な画像を見ることができません。切り取られます。ここに私の質問は：stackoverflow.com/questions/22331179/...
— SI8
1
人々が犯す明らかな間違いは、背景画像をcssに（つまりによってbackground : url("example.png");）配置し、background-size:100%;その下のcss属性を使用して画像を画面の幅に合わせて拡大することです。これは機能しません。本文の背景画像を配置する場合は、のように画像属性をbodyタグに追加する必要があります<body background="example.png">。次に、css background-size:100%;を使用してスケーリングします。
— sjsam 2015年
166

CSS：

html,body {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}
— ジョシュ・クロジエ
ソース
ただし、これはIE8では機能しません。ウィンドウの上部と下部にマージンを作成します。
— erdomester 2014
Android html, body {...}では、の代わりに使用した場合に機能しましたbody {...}。
— エドワード
40

次のCSSパーツは、すべてのブラウザーで画像を拡大する必要があります。

これは、ページごとに動的に行います。したがって、私はPHPを使用して、ページごとに独自のHTMLタグを生成します。すべての写真は「image」フォルダにあり、「Bg.jpg」で終わります。

<html style="
      background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\',     sizingMethod=\'scale\');
      -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>

すべてのページの背景画像が1つしかない場合は、$pic変数を削除し、エスケープバックスラッシュを削除し、パスを調整して、このコードをCSSファイルに配置します。

html{
    background: url(images/homeBg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg',     sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}

これはInternet Explorer 9、Chrome 21、Firefox 14でテストされています。

— トルステン・ニエフス
ソース
2
ベンダープレフィックスの先頭の「-」を忘れただけなので、この例は下位互換性の意味で機能しません。それはでなければならない-webkit-background-size、-moz-background-sizeようにと。参照developer.mozilla.org/en-US/docs/CSS/...を それとも、のような速記プロパティにそれを将来性を含むために行くbackground: url(img/bg-home.jpg) no-repeat center center / cover fixed;
— フォルカー・E.
これは、IE9で機能する唯一のソリューションでした。ありがとう。
— ロブニック2014年
17

実際には、imgタグを使用して背景画像と同じ効果を得ることができます。Zインデックスを他よりも低く設定し、position：absoluteを設定して、フォアグラウンドのすべてのボックスに透明な背景を使用するだけです。

— キム・スティーベル
ソース
それは私が他のSOの質問で見たものであり、うまくいきますが、CSS3が出て以来、今はそれを行うにはより良い方法だと思いました。
— ファビオ・アントゥネス
3
ブラウザーの使用状況の進展があったとしても、それを商業的に使用できるのはたった10年だけでしょうか？
— Kim Stebel
CSS3であるため、ほとんどの最新のブラウザーで認識されるプロパティを使用し、サポートされていないブラウザーに最低限の標準を提供することに問題はありません。ここでは、たとえば、<IE8には退屈で許容範囲のあるタイル張りの背景を使用でき、Firefox / Chrome / Safari / Operaには素敵な画像を使用できます。また、JavaScriptを備えた古いブラウザーのCSS3機能を複製する多くのポリフィルがあります。つまり、すべてのブラウザがCSS3をサポートするのを待ってからそれを使用する必要はありません。
— Dan Blows、
：ただ、独自のMS AlphaImageLoaderの使用を参照して、この他のポスト見つけstackoverflow.com/questions/2991623/...
— uglymunky
17

このCSSを使用します。

background: url('img.png') no-repeat; 
background-size: 100%;
— RSH1
ソース
15

それはCSSトリックによって説明されています：完全なページ全体の背景画像

デモ：https : //css-tricks.com/examples/FullPageBackgroundImage/progressive.php

コード：

body {
  background: url(images/myBackground.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
— アーマー・シャーザド
ソース
上記の回答に基づいて、バックグラウンドの添付ファイルの修正がモバイルデバイスとMicrosoft Edgeで機能しないことを確認しました。すべてのデバイスとブラウザーでバックグラウンドをストレッチして修正するための完璧なソリューションjquery-backstretch.com
— Aamer
15

このクラスをCSSファイルに追加できます。

.stretch {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

それは動作します：

  • Safari 3以降
  • Chrome Whatever以降
  • Internet Explorer 9以降
  • Opera 10以降（Opera 9.5はサポートさbackground-sizeれていますが、キーワードはサポートされていません）
  • Firefox 3.6以降（Firefox 4はベンダー以外の接頭辞付きバージョンをサポートしています）
— アルンラージS
ソース
これは実用的な「ストレッチフィット」の回答です。注：アスペクト比は変わります。
— devdrc 2017
10

コンテナーのサイズに基づいて画像を適切にスケーリングするには、以下を使用します。

background-size: contain;
background-repeat: no-repeat;
— Justinpees
ソース
9

私はこれを使用し、すべてのブラウザで動作します：

<html>
    <head>
        <title>Stretched Background Image</title>
        <style type="text/css">
            /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
            html, body {height:100%; margin:0; padding:0;}

            /* Set the position and dimensions of the background image. */
            #page-background {position:fixed; top:0; left:0; width:100%; height:100%;}

            /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
            #content {position:relative; z-index:1; padding:10px;}
        </style>
        <!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
        <!--[if IE 6]>
        <style type="text/css">
            html {overflow-y:hidden;}
            body {overflow-y:auto;}
            #page-background {position:absolute; z-index:-1;}
            #content {position:static;padding:10px;}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
        <div id="content">
            <h2>Stretch that Background Image!</h2>
            <p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
            <p>Go on, try it - resize your browser!</p>
        </div>
    </body>
</html>
— マハディ・ジョーカー
ソース
9

ありがとう！

しかし、それがGoogle ChromeおよびSafariブラウザでは機能しませんでした（ストレッチは機能しましたが、写真の高さは2 mmしかありませんでした）。

設定してみてください height:auto;min-height:100%;

だからあなたのheight:100%;行のためにそれを変更してください：

#### #background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    width:100%;
    height:auto;
    min-height:100%;
}

その新しく追加されたコードの直前に、私はこれを私のDrupal Tenduテーマに入れましたstyle.css：

html、body {height：100％;}

#page {background：#ffffff; height：auto！important; height：100％; min-height：100％; position：relative;}

次に、Drupal内で画像を追加しながら新しいブロックを作成する必要がありますclass=stretch。

<img alt = "" class = "stretch" src = "pic.url" />

そのDrupalブロックでエディターを使用して画像をコピーするだけでは機能しません。エディターをフォーマットされていないテキストに変更する必要があります。

— Cybr
ソース
8

幅と高さが100％の絶対divの画像に同意します。CSSで本文の幅と高さを100％に設定し、マージンとパディングをゼロに設定してください。この方法で見つけられるもう1つの問題は、テキストを選択するときに、選択領域が背景画像を含むことがあり、ページ全体が選択された状態になるという残念な影響があります。次のuser-select:noneように、CSSルールを使用してこれを回避できます。

<html>
    <head>
        <style type="text/css">

            html,body {
                height: 100%;
                width: 100%
                margin: none;
                padding: none;
            }

            #background {
                width: 100%;
                height: 100%;
                position: fixed;
                left: 0px;
                top: 0px;
                z-index: -99999;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
            }

            #background img {
                width: 100%;
                height: 100%;
            }

            #main{ z-index:10;}
        </style>
    </head>
    <body>
        <div id="main">
            content here
        </div>
        <div id="background"><img src="bg.jpg"></div>
    </body>
</html>

繰り返しになりますが、ここではInternet Explorerが悪者です。ユーザー選択オプションを認識しないためです。InternetExplorer 10のプレビューでさえサポートされていないため、JavaScriptを使用して背景画像の選択を防ぐことができます（httpなど）。 ：//www.felgall.com/jstip35.htm）またはCSS 3 background-stretchメソッドを使用します。

また、SEOの場合、背景画像をページの下部に配置しますが、背景画像の読み込みに時間がかかりすぎる場合（つまり、最初は白い背景の場合）、ページの上部に移動できます。

— マイケブラック
ソース
それは、選択し得るはずのBGとだけdiv要素、その後のdont使用のIMG
— ヤツェクPietal
7

ページ全体に拡大することなく、背景画像を中央に配置して拡大縮小したいと思い、アスペクト比を維持したいと考えました。他の回答で提案されたバリエーションのおかげで、これは私にとってうまくいきました：

インライン画像：------------------------

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS ----------------------------------

html {
    height:100%;
}

#background {
    text-align: center;
    width: 100%; 
    height: 100%; 
    position: fixed;
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    margin: auto;
    height:100%;
}
— アニーディー
ソース
5

background-X CSSプロパティの組み合わせを使用して、理想的なスケーリングの背景画像を実現しました。

background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;

これにより、背景は常にブラウザウィンドウ全体を覆い、拡大縮小時に中央に配置されたままになります。

— ライアン・デンカート
ソース
4

Backstretchプラグインを使用します。複数の画像をスライドさせることもできます。コンテナ内でも機能します。この方法では、たとえば、背景の一部のみを背景画像で覆うことができます。

それを動作させることができたとしても、それが使いやすいプラグインであることを証明します:)。

— ダニエル
ソース
3

コンテンツを水平方向に中央揃えにしたい場合は、次のような組み合わせを使用します。

background-repeat: no-repeat;
background-size: cover;
background-position: center;

これは美しく見えます。

— サミュエル・ラムザン
ソース
2

このCSSを使用します。

background-size: 100% 100%

— 怪しげなシェリフ
ソース
残念ながら、これは以前の回答と
— 同じものです
1
@ Zanshin13前の質問は知りませんでした。次に、私の回答に反対票を投じないで、質問を閉じるために投票する必要があります！
— Shady Sherif
1

border-image : yourimageプロパティを使用して、画像を境界まで拡大できます。background-imageを指定しても、境界線の画像がその上に描画されます。

border-imageCSS 3をサポートしていない場所にスタイルシートが実装されている場合、このプロパティは非常に役立ちます。GoogleChromeまたはFirefoxを使用している場合は、background-size:coverプロパティ自体をお勧めします。

— ナテッシュ・バット
ソース
0

1つの画像を使用してこれを実現しますか？なぜなら、実際には2つの画像を使用してストレッチ背景にいくらか似たものを作成できるからです。たとえば、PNG画像。

私はこれを以前にやったことがあり、それほど難しくはありません。その上、ストレッチは背景の質を損なうだけだと思います。巨大な画像を追加すると、遅いコンピューターやブラウザーの速度が低下します。

— マリオリカルデ
ソース
いい視点ね。しかし、私は背景画像にjpgを使用しています。彼女は約1500x1000で100kbを少し超えるだけです。しかし、どうやってそれをしたのですか？
— ファビオ・アントゥネス
1
画像を水平方向に中央揃えにし、画像のエッジを単色またはパターンで柔らかくしてみませんか？これにより、ユーザーが画像の解像度以上のものを持っている場合、シームレスな適応が可能になります。
— MarioRicalde 2009
しかし、私は画像が背景を満たすことを望みます。あなたの言っていること、それは私がいつもやっていることです。
— ファビオ・アントゥネス
0

以下は私のために働いた。

.back-ground {
   background-image: url("../assets/background.png");
   background-size: 100vw 100vh;
}

さまざまな次元で背景全体をカバーするように機能しました

— tony2tones
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.