実行時にCSSの背景イメージを変更するにはどうすればよいですか？本文に次の背景イメージがあり、実行時にイメージを変更できますか？本文の背景イメージを変更する
body {
height: 100%;
background: #fff8db url(../images/backgrounds/header-top.jpg) no-repeat center top;
/*background-color: #fff8db;*/
/*background-size: 1650px 900px;*/
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size:12px;
font-weight:normal;
color:#404040;
line-height:20px; }
あなたはjQueryのはあなただけこれを行うことができ、すでにロードされている場合：
$('body').css('background-image', 'url(../images/backgrounds/header-top.jpg)');
EDIT：headタグ内
まず負荷はJQuery：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
次に呼び出しをページの読み込みが終了したときなど、何かが起こったときに背景画像を変更するJavascript：
JavaScriptでこのような何かその後<body onload="init()">
：
function init() {
var someimage = 'changableBackgroudImage';
document.body.style.background = 'url(img/'+someimage+'.png) no-repeat center center'
}
をあなたが応じて好きに 'someimage' 変数を変更することができますだけで体のonloadイベント機能を設定
<script type="text/javascript">
$(document).ready(function() {
$('body').css('background-image', 'url(../images/backgrounds/header-top.jpg)');
});
</script>
これにはJavaScriptを使用する必要があります。体のためにbackground-imageのスタイルを設定することができます。
var body = document.getElementsByTagName('body')[0];
body.style.backgroundImage = 'url(http://localhost/background.png)';
ちょうどあなたが実際 URLでURLを置き換えることを確認してください。
時刻などの条件によっては、その画像が背景画像として設定されます。
ページであれば、一般的にソーシャル共有に使用Open Graph画像を、持っている、あなたはそうのようなJavaScriptのバニラと、実行時に背景画像を設定するためにそれを使用することができます：
<script>
const meta = document.querySelector('[property="og:image"]');
const body = document.querySelector("body");
body.style.background = `url(${meta.content})`;
</script>
上記の使用document.querySelectorとAttribute Selectorsに割り当てます。meta最初に選択したOpen Graph画像が割り当てられます。同様の作業を行ってbodyを取得します。最後に、文字列補間を使用して、bodybackground.styleにOpen Graph画像のパスの値を割り当てます。
あなたは全体ビューポートをカバーし、固定滞在するイメージがそうのようなbackground-sizeを設定したい場合：
body.style.background = `url(${meta.content}) center center no-repeat fixed`;
body.style.backgroundSize = 'cover';
あなたとCSSとスワップを利用して、低品質の背景画像のプレースホルダーを設定することができ、このアプローチを使用します後で画像onloadイベントを使用して、忠実度の高い画像を表示し、それにより、の知覚された待ち時間を低減する。。
私はhtmlであなたのコードを適用しようとしましたが、変更はありません。） –
VeecoTech
ちょうど指摘すると、元の質問は厳密にjavascriptの回答を求めており、これはjqueryを利用しています。以下の答えは実際の質問に従ってこれを行う正しい方法です。なぜこれが最良の答えとして選ばれたのか分かりません。 – ChapmIndustries
答えは「既にJQueryが読み込まれている場合は...」から始まります。これは多くのWebサイトが既に行っているものです。 – nathancahill