web-dev-qa-db-ja.com

CSSのみをバックグラウンドで拡大縮小

私は私の背景画像がブラウザのビューポートのサイズに応じて伸縮するようにしたいです。

たとえば、CSS背景の拡大縮小のように、スタックオーバーフローに関する問題を解決しました。うまく機能しますが、backgroundタグではなくimgを使用して画像を配置したいと思います。

その中にimgタグが配置され、そしてCSSを使ってimgタグに敬意を表します。

width:100%; height:100%;

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

background-image宣言でそれをするための良い方法はありますか？

cssbackground
796
Fábio Antunes

CSS3には、background-size:coverというNiceという小さな属性があります。

これは、縦横比を維持しながら背景領域が背景画像で完全に覆われるように画像を拡大縮小します。領域全体が覆われますが、サイズ変更された画像の幅/高さが大きすぎると、画像の一部が見えなくなることがあります。

978
Vashishtha Jogi

あなたはCSS3プロパティを使ってそれを非常にうまくやることができます。それは比率にサイズ変更するので画像の歪みはありません（それは小さな画像を高級にしますが）。ただ注意してください、それはまだすべてのブラウザに実装されていません。

background-size: 100%;
457
Matt Burgess

コードを使う 私が言った...

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では、これはずっと簡単になるでしょう。

183
Fábio Antunes

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*/
}
162
user742030
background-size: 100% 100%;

両方の軸上の要素全体を埋めるようにbgを引き伸ばす

46
yeahdixon

次の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でテストされています。

39
Thorsten Niehues

このCSSを使用してください。

background: url('img.png') no-repeat; 
background-size: 100%;
17
RSH1

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

17
Kim Stebel

このクラスを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なんでも
  • Internet Explorer 9 またはそれ以降
  • Opera 10以降（Opera 9.5はbackground-sizeをサポートしていますが、キーワードはサポートしていません）
  • Firefox 3.6以降（Firefox 4はベンダ以外のプレフィックスをサポートしています）
14
Arunraj S

Css-tricks /で説明されています https://css-tricks.com/perfect-full-page-background-image/ /

デモ： 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;
}
14
Aamer Shahzad

コンテナのサイズに基づいて画像を適切に拡大縮小するための手順は次のとおりです。

{
background-size:contain;
background-repeat: no-repeat;
}
10
justinpees

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

<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
Mahdi jokar

ありがとうございます。

しかし、それから 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%;
}

その新しく追加されたコードの直前に、私はこれを私の DrupalTendu themes style.cssに持っています。

hTML、ボディ{高さ：100％;}

＃page {background：#ffffff;身長：自動、重要、身長：100％、身長：100％、位置：相対、}

それから私はclass=stretchを追加している間、絵でDrupalの中に新しいブロックを作らなければなりません：

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

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

8
Cybr

私は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はユーザー選択オプションを認識しないため、ここでは悪者です - Internet Explorer 10 previewはサポートしていません。選択（たとえば、 http://www.felgall.com/jstip35.htm ）、または CSS 3 background-stretchメソッドを使用します。

また、 _ seo _ の場合、背景画像をページの下部に配置しますが、背景画像の読み込みに時間がかかりすぎる場合（つまり、最初は白の背景の場合）ページ上部.

8
Myke Black

背景画像をページ全体に拡大せずに中央揃えと拡大縮小を行い、アスペクト比を維持したいと考えていました。他の答えで提案されたバリエーションのおかげで、これは私のために働きました：

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

<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%;
}
7
AnnieDee

Backstretch プラグインを使用してください。複数の画像をスライドさせることもできます。それはコンテナ内でも機能します。このようにして、例えば背景の一部だけを背景画像で覆うことができる。

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

4
Daniel

コンテンツを水平方向の中央に配置したい場合は、次のような組み合わせを使用してください。

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

これは美しく見えるでしょう

2
Samuel Ramzan

border-image : yourimageプロパティを使用すると、background-imageを指定したとしても、その上にボーダーイメージが描画されます。

cSS3をサポートしていない場所でスタイルシートが実装されている場合、border-imageプロパティは非常に便利です。あなたがFirefoxのクロムを使用しているならば、私はbackground-size:coverプロパティ自体をお勧めします。

1
Natesh bhat

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

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

これにより、背景は常にブラウザウィンドウ全体を覆い、スケーリング時に中央に配置されたままになります。

1
Ryan Den-Kaat

このCSSを使用してください。

background-size: 100% 100%

0
shady sherif

1枚の画像だけでこれを達成したいですか。なぜなら、実際には2つの画像を使用して背景を伸ばしていくのと似たようなことができるからです。例えば _ png _ imagesです。

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

0
MarioRicalde