web-dev-qa-db-ja.com

CSS：背景画像を画面の幅と高さの100％に拡大しますか？

MyImage.jpgという画像があります。これは私のCSSです：

body {
    background-image:url("../images/myImage.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

何らかの理由で、これを行うと、myImageの幅は画面全体に広がりますが、高さはページ上の他のすべての高さまでしか伸びません。だから私は束を置くと

<br>

私のhtmlページでは、高さが増加します。 HTMLページが

<div id='header'>
    <br>
</div>

その場合、背景画像の高さはちょうど1つの高さになります

<br>

ユーザーがWebページを表示するために使用している画面の背景画像の高さを100％にするにはどうすればよいですか？

htmlcssbackground-image
53
user2719875

htmlの高さを100%に設定する必要があります

body {
    background-image:url("../images/myImage.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
html {
    height: 100%
}

http://jsfiddle.net/8XUjP/

107
SomeKittens

背景の比率を失いたくない場合は、background-size: cover;をお勧めします。 JS Fiddle

html { 
  background: url(image/path) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

ソース： http://css-tricks.com/perfect-full-page-background-image/

52
Derek Story
html, body {
    min-height: 100%;
}

トリックを行います。

デフォルトでは、htmlとbodyでさえ、それらが保持するコンテンツと同じ大きさであるだけで、ウィンドウの幅/高さを超えることはありません。これはしばしば非常に奇妙な結果につながる可能性があります。

読むこともできます http://css-tricks.com/perfect-full-page-background-image/

非常に優れたスケーラブルなフルバックグラウンドイメージを実現する優れた方法がいくつかあります。

5
Kjeld Schmidt

Vhユニットを使用して、ビューポートの背景、つまりブラウザウィンドウを塗りつぶすことができます。 (height:100vh;)

html{
    height:100%;
    }
.body {
     background: url(image.jpg) no-repeat center top; 
     background-size: cover; 
     height:100vh;     
}
3
Mostafa Norzade