HTML要素全体をカバーするように背景画像を拡大するにはどうすればよいですか？

HTML要素（body、divなど）の背景画像を取得して、幅と高さ全体を拡大しようとしています。

運が悪い。それは可能ですか、それとも背景画像以外の方法で行う必要がありますか？

私の現在のCSSは：

body {
    background-position: left top;
    background-image: url(_images/home.jpg);
    background-repeat: no-repeat;
}

前もって感謝します。

編集：私はガブリエルの提案でCSSを維持することに熱心ではないので、代わりにページのレイアウトを変更します。しかし、それが最良の答えのように思われるので、そのようにマークします。

<style>
    { margin: 0; padding: 0; }

    html { 
        background: url('images/yourimage.jpg') no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>

background-sizeプロパティを使用してください：http : //www.w3.org/TR/css3-background/#the-background-size

つまり、これを試すことができます。

<div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" >

私がCSSとJSをほとんど使用していないところ...

<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>

そして、それは私にとってはうまくいきます。

背景画像の引き延ばしが可能かどうかわからない。すべてのターゲットブラウザーでそれが不可能な場合、または信頼できない場合は、z-indexを低く設定し、positionをabsoluteに設定してストレッチimgタグを使用して、他のコンテンツがその上に表示されるようにすることができます。

最終的に何をしているか教えてください。

編集：私が提案したのは、基本的にはガブリエルのリンクにあるものです。だからそれを試してください:)

@PhiLhoの回答を拡張するには、非常に大きな画像（または任意のサイズの画像）をページの中央に配置します。

{ 
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

または、画像の背景と一致する背景色を使用した小さい画像を使用することもできます（無地の場合）。これはあなたの目的に合うかもしれませんし、そうでないかもしれません。

{ 
background-color: green;
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

画面のサイズを変更するときに背景画像を引き伸ばす必要があり、古いバージョンのブラウザとの互換性が必要ない場合は、次のように機能します。

body {
    background-image: url('../images/image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

大きな横長の画像がある場合、この例では、縦長モードで背景のサイズを変更し、上部に表示し、下部は空白のままにします。

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background-image: url('myimage.jpg');
    background-position-x: center;
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media screen and (orientation:portrait) {
    body {
        background-position-y: top;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
    }
}

私が主に求められる効果を達成するために使用する次のコード：

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

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;

純粋なCSSではできません。他のすべてのコンポーネントの背後にあるページ全体をカバーする画像があると、おそらく最善の策です（上記の解決策のように見えます）。とにかく、それはとにかくひどく見える可能性があります。私は、ほとんどの画面解像度をカバーするのに十分な大きさの画像（たとえば、最大1600x1200、それよりも不足している）、ページの幅を制限するか、単にタイルの画像を使用します。

画像{

background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0 3em 0 3em; 
margin: -1.5em -0.5em -0.5em -1em; 
  width: absolute;
  max-width: 100%; 

divをbodyの直接の子（たとえば、クラス名bg）にして、body内の他のすべての要素を囲み、これをCSSファイルに追加するだけです。

.bg {
    background-image: url('_images/home.jpg');//Put your appropriate image URL here
    background-size: 100% 100%; //You need to put 100% twice here to stretch width and height
}

次のリンクを参照してください。https：//www.w3schools.com/css/css_rwd_images.asp 下にスクロールして、次のように書かれている部分まで移動します。

2. background-sizeプロパティが「100％100％」に設定されている場合、背景画像はコンテンツ領域全体を覆うように引き伸ばされます

そこには、「img_flowers.jpg」のサイズがどのように変更されたかに関係なく、画面またはブラウザのサイズに拡大して表示されます。

わたしにはできる

.page-bg {
  background: url("res://background");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}