web-dev-qa-db-ja.com

Webサイトの背景画像を画面サイズに合わせる

ウェブサイトを始めたばかりで、特定の解決策が見つからないという小さな問題に既に遭遇しています。

私は自分のウェブサイトの背景を画面サイズの幅に合わせたいと思っていました。高さは関係ありません。

これは私の画像へのリンクです：

    ../IMAGES/background.jpg

編集

何が間違っているのかわかりませんが、何らかの理由で、体は背景画像を取得したくさえありません。単に白い背景を表示するだけです。

body
{background-image:url(../IMAGES/background.jpg);}
htmlcssbackgroundsizeresponsive
20
Tim

このプラグインでこれを行うことができます http://dev.andreaseberhard.de/jquery/superbgimage/

または

   background-image:url(../IMAGES/background.jpg);

   background-repeat:no-repeat;

   background-size:cover;

ブラウザのプレフィックスは不要です。両方のブラウザでサポートされています

58
Victorino

これを試して 、

 background: url(../IMAGES/background.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

詳細については、これに従ってください 完全なページ全体の背景画像 !!

23
zey

試すことができます

.appBackground {
    position: relative;
    background-image: url(".../img/background.jpg");
    background-repeat:no-repeat;
    background-size:100% 100vh;
}

私のために働く:)

11
Carlos Jaraiz

これを試して、それが役立つことを願っています：

position: fixed;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-image: url('background.jpg');
3
Sara Popa

..上記の解決策は私には役に立たなかった（少なくともFirefoxとsafariの現在のバージョンでは）。

私の場合、実際にはbackground-imageではなくimgタグを使用しようとしていますが、z-heightを使用するとbackground-imageでも機能するはずです。

<img  src='$url' style='position:absolute; top,left:0px; width,max-height:100%; border:0;' >

これは、画像を「フルスクリーン」（おそらくアスペクト比を壊す）にスケーリングします。これは、私がやりたいことでしたが、困難な発見でした。

バックグラウンドイメージでも機能する場合がありますが、カバー/包含が機能しなかったため、この種のソリューションを試すことをあきらめました。

含む動作は、どこでも見つけることができるドキュメントと一致していないようでした-含むドキュメントは、画面内に最大の次元が含まれるようにする必要があると理解しました（維持された側面）。常に含まれていると、画像が小さくなります（元の画像は大きかった）。

含まれているのは、カバーよりも私が欲しかったものに近いハックでした。アスペクトは維持されているようですが、画像は画面に最小寸法に一致するようにスケーリングされているようです-つまり、寸法が画面外になる...

私はさまざまなことを試してみましたが、最初から含まれていますが、高さは本質的に常に無視され、オーバーフローします。 （私は両方でフルスクリーンになるように非ワイドスクリーン画像をスケーリングしようとしていますが、壊れたアスペクトは私にとっては大丈夫です）。基本的に、上記は私のために働いたものです、それが誰かを助けることを願っています。

2
pacifist

これを試して：

background: url(../IMAGES/background.jpg) no-repeat;
background-size: auto auto;
2
Rohit

ブラウザー互換性CSSを使用した画面の背景画像の修正

.full-screen {
    height: 100%;
    width: 100%;
    background-image: url(../images/banner.jpg);
    background-size: cover;
    background-position: center;
    //for browser compatibility
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
}
0
Super Model

これに対するあなたの質問への答えがありますが、私はかつてこの問題の犠牲者であり、オンラインで数回検索した後、私はそれを解決できませんでしたが、私の仲間のハブメイトが私を助け、私が共有する必要があると感じています。以下に例を示します。

フォルダー：web-projects/project1/imgs-journey.png

background-image:url(../imgs/journey.png);
background-repeat:no-repeat;
background-size:cover;

私の主要なポイントは、私のjourney.pngが別のフォルダーのimgsフォルダー内にあることに気付いた場合のドットです。したがって、画像が保存されている数値フォルダーに従ってドットを追加します。私の場合、私のjourney.png画像は2つのフォルダーに保存されるため、2つのドットが使用されるため、これは背景画像がコードに表示されないことがあると考えられます。ありがとう。

0
Stanleynd

これを試して、

.appBg {

background-image: url(".../img/background.jpg");
background-repeat:no-repeat;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto ;
}

これは私のために働く

0
Udara