2016-04-02 12 views
1

ページが読み込まれた後にバックグラウンドを読み込もうとしていますが、期待通りに動作しないようです。-webkit-background-sizeがjQuery CSSで動作しない

CSSの前に私のコードをした

html { 
    background: url(<?php echo $this->Cdn->getUrl(); ?>/images/photos/bg-blurred.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-color: #0c1d31; 
} 

今、私はjQueryを使ってそれを試してみてください。

jQuery(document).ready(function() { 

    jQuery('html').css({ 
     'background-image': "url('<?php echo $this->Cdn->getUrl(); ?>/images/photos/bg-blurred.jpg')", 
     'background-size': "cover", 
     'background-color': "#0c1d31", 
     '-webkit-background-size': "cover", 
     '-moz-background-size': "cover", 
     '-o-background-size': "cover", 

    }); 
}); 

それは '-webkit-背景サイズ' と「-moz-バックグラウンドと思われますsize 'と' -o-background-size 'はjQuery.cssを使用していません。他のCSSのプロパティは正常に動作します。

どのようなアイデアをお願いしますか?

+0

質問に適切かつ迅速に回答するために、コードに開始点を追加してください。 http://stackoverflow.com/help/mcve – Roy

+0

@Royも参照してください。私の質問に何が問題なのか分かりませんか? – zeflex

+0

ブラウザでは、しばらくの間プレフィックスを必要としなかったので、なぜ気になりますか? – Rob

答えて

0

申し訳ありませんが、私の間違いでした。私はJSでいくつかのコードを逃しています...

jQuery('html').css({ 
     'background-image': "url('<?php echo $this->Cdn->getUrl(); ?>/images/photos/bg-blurred.jpg')", 
     "background-repeat": "no-repeat", 
     "background-position": "center center", 
     "background-attachment": "fixed", 
     'background-size': "cover", 
     'background-color': "#0c1d31", 
     '-webkit-background-size': "cover", 
     '-moz-background-size': "cover", 
     '-o-background-size': "cover", 
    }); 

良いです。

1

あなただけの「-webkit-背景サイズ」をしようとした場合:

jQuery(document).ready(function() { 

    jQuery('html').css({ 
     '-webkit-background-size': "cover" 
    }); 
}); 

あなたの要素は次のようになりますことがわかります:

<html style="background-size: cover;"> 

これはあなたの問題ではありません。

あなたはおそらく、あなたのURLを探してください:

"url('<?php echo $this->Cdn->getUrl(); ?>/images/photos/bg-blurred.jpg')" 

あなたがクロムを使用している場合は、エラーがないかどうかを確認するために、ネットワークのタブ内のF12に確認してください。

+0

問題はありません。背景画像がうまく読み込まれます。センタリング(カバー)が失敗するのは唯一の問題です。私は通常のCSSコードで私の質問を更新しました。 – zeflex

+0

私の間違い私はjQueryでいくつかのコードを見逃しました...私は答えを追加します... – zeflex