style.background - （ESPモバイル上）画面にフィット - JS、HTML、CSS

Question

は、これは私のCSS

<style> 
body { 
background: url(30.gif) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 
</style> 

これは、画面にフィット背景画像を作るです。

ここで、JSを使って背景画像を以下のように動的にしようとすると、背景画像が画面にフィットしなくなりました。

<style> 
body { 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 
</style> 

そしてJS

body.style.background = 'url(30.gif) no-repeat center center fixed'; 

これは、画像が元のサイズに見えます。私はイメージが画面に収まるようにしたい。

私は次のことを試みたが、無駄に：

body.style.background = 'url(30.gif) no-repeat center center fixed width:100% height:100%'; 

どのように私は、エラーを修正しますか？

Answer 1

JSがあなたのCSSを上書きしています。 CSSで別々にすべてのプロパティを設定してみてください、

また

body.style.background = 'url(30.gif) center center/cover fixed no-repeat'; 

、と確認してください：あなたは（あなたが示すようにbodyという名前の変数にdocument.bodyを保存したと仮定して）このように、あなたのJSに背景のサイズを含める必要があなたはそのようにそれを行う、動的に背景画像を設定する必要がある場合はその後

body { 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -ms-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-attachment: fixed; 
    background-position: 50% 50%; 
    background-repeat: no-repeat: 
    min-height: 100vh; 
} 

：身体は常にこのようなビューポートを、埋め

body.style.backgroundImage = 'url(30.gif)'; 

background省略形プロパティを設定すると、個々のプロパティが上書きされ、ベンダープレフィックスの背景サイズが変更されるため、このようにする必要があります。