web-dev-qa-db-ja.com

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

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

あまり運がありません。それも可能ですか、それが背景画像である以外に何か他の方法でそれをしなければなりませんか？

私の現在のCSSは：

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

前もって感謝します。

編集：Gabrielの提案でCSSを維持したくないので、代わりにページのレイアウトを変更しています。しかし、それが最良の答えのように思えるので、そのようにマークしています。

htmlcssbackground-image
85
Fung
<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>
184
Nathan

background-sizeプロパティを使用します。 http://www.w3.org/TR/css3-background/#the-background-size

14
Kornel

要するに、これを試すことができます....

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

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

8
Tamal Samui

背景画像の拡大が可能かどうかはわかりません。すべてのターゲットブラウザーで不可能または信頼できないことがわかった場合、z-indexを低く設定し、位置を絶対に設定して、その上に他のコンテンツが表示されるようにストレッチimgタグを使用してみてください。

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

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

6
Travis Collins

@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; 
}
5
Traingamer

画面のサイズ変更中に背景画像を拡大する必要があり、古いバージョンのブラウザとの互換性が必要ない場合は、これで機能します。

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

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

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

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

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;
    }
}
3
live-love
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;
2
Behnam Mohammadi

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

0
PhiLho