背景画像がまったく動作しない

私はしばらくの間、私の背景イメージをさまざまな画面解像度で動作させる方法を研究してきました。多くの失敗した試みの後、私は普通のCSSバックグラウンドを得ることさえできないことに気づきました。それはファイルではなく、私はさまざまなフォーマットを試みました。異なる画面解像度のためコード：背景画像がまったく動作しない

html { 
 
    background: url('background.jpg') no-repeat center center fixed; 
 
    -webkit-background-size: contain; 
 
    -moz-background-size: contain; 
 
    -o-background-size: contain; 
 
    background-size: contain; 
 
}

コード通常背景：

body { 
 
    background-image: url('Background.jpg'); 
 
}

出典

2016-03-21 Jayden

これは奇妙です。画像へのパスが正しいことを確認しましたか？たとえば、イメージが "example"フォルダの内部にある場合、パスは "example/myImage.png"にする必要があります。

応答性の高い背景としては、単純なbackground-size: 100%;で十分でしたが、正しい軌道に乗っていると思います。これをチェックしてくださいhttps://jsfiddle.net/a0mvnj63/

また、私の例のように外部の画像を使ってみてください。

出典

2016-03-21 09:02:00 Unforgiven

それとも、完全な背景の上に背景画像を埋めるために、 'センター/ cover'を使用することができますし、このbackground-image:url('../background.jpg');のようにあなたのコードを使用してみてください：https：//でjsfiddle .net/C0dekid/a0mvnj63/1 /これは背景を記入し、異なる画面解像度のデバイスで縮小します。 – Jer

@ C0dekid確かに。それはよりエレガントなこの方法です – Unforgiven

ありがとう、その今働いています。 – Jayden

のみ背景要素は、任意のDIVに高さと幅を与えないか、またはhtml。

コードに高さと幅を与えてみてください。ただ

html { background: url('background.jpg') no-repeat center center fixed; height:500px; width:500px; }

またはちょうどあなたが背景に画像を含めると取得による自動高さの幅を取得するので、身体にいくつかのデータを置くように。

出典

2016-03-21 08:59:30

height: 100vh;

body { 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 100vh; 
 
    background-image: url(http://static.tumblr.com/295a1562899724d920b2b65ba33ffb76/vouqyzj/f2Dna5qb8/tumblr_static_197ahk99f1z44ogskg4gw4c80.jpg); 
 
    background-size: 100% 100%; 
 
    background-position: center; 
 
} 
 
h1 { 
 
    text-align: center; 
 
    color: #fff; 
 
}

<body> 
 

 
    <h1>Hello Universe</h1> 
 

 
</body>

出典

2016-03-21 09:16:31

背景画像がまったく動作しない

答えて

関連する問題