2016-11-11 1 views
0

ボディのバックグラウンドの負荷を定義するスクリプト(javascript)が必要です。 まず、ページの高さと高さを確認するスクリプトがあります。それから、2つの変数( "W"と "H")が与えられます。 背景が幅= W、高さ= Hであることを希望します。 おそらく、最良の解決策は、ページの幅と高さを取得した後、本体に背景を置くスクリプトを実行することです。幅と高さを変数にして、負荷の背景を定義するスクリプト

<script> 
function fundo() { 
var w = window.innerWidth 
|| document.documentElement.clientWidth 
|| document.body.clientWidth; 

var h = window.innerHeight 
|| document.documentElement.clientHeight 
|| document.body.clientHeight; 

} 

</script> 
</head> 
<body onload="fundo()" style="background: 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRiu8PAY4rJ4WNg2MqwpMfBQ5w3jAXxu5JMYhgImhog9quU-ikZWq8AgQ'; width: "+ w +" height: "+ h +";" > 
</body> 
+0

そしてW:あなたはそのようにそれを行う必要があります帽子はあなたの問題ですか?あなたはwindow.onloadを試しましたか、それはあなたのためにうまくいかなかったのですか? –

+0

@AlexeySoshin –

+0

あなたの問題を理解できません。テストするどこかで作業コードを持っていますか? –

答えて

1

あなたはCSSでそれを行うにはないいくつかの具体的な理由がある場合は、

var url = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRiu8PAY4rJ4WNg2MqwpMfBQ5w3jAXxu5JMYhgImhog9quU-ikZWq8AgQ"; 
 
function fundo() { 
 
    var w = window.innerWidth 
 
      || document.documentElement.clientWidth 
 
      || document.body.clientWidth; 
 

 
    var h = window.innerHeight 
 
      || document.documentElement.clientHeight 
 
      || document.body.clientHeight; 
 

 
    document.body.style.background = "url('" + url + "')"; 
 
    document.body.style.backgroundSize = w + "px " + h + "px"; 
 
}
<body onload = "fundo()"></body>

+0

はい、私は本当にCSSでそれをしない理由があります。 CSSではずっと簡単ですし、私はすでにそれをしました。しかし、私はjavascriptに慣れていないので、私は尋ねなければならなかった。ありがとう! –

0

本文は、とにかくフルハイトと幅です。純粋なCSSでこれをすべて実行できるはずです。あなたはそれが可能な領域を塗りつぶし確保するためにバックグラウンド・サイズを使用することができます。

body { 
    width: 100%; /* set just in case */ 
    height: 100%; /* set just in case */ 
    background-image: url(pathtoimage); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: cover; 
} 

これは、それを埋めるために、画像をストレッチします:

body { 
    width: 100%; /* set just in case */ 
    height: 100%; /* set just in case */ 
    background-image: url(pathtoimage); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: 100% 100%; 
} 
関連する問題