ウェブページのランダム背景画像

私は、ブラウザウィンドウ全体を占有し、応答性の高い画像を取得する方法を見つけようとしています。ページが読み込まれるたびに、私はローカルにある選択したグループの写真から背景イメージを変更したいと思います。ウェブページのランダム背景画像

私はここでいくつかのソリューションを試しましたが、実際には何も動作していません。私が持っているHTMLは次のとおりです。

<div id="container"> 

    <img src="Images/IMG_3764.JPG" alt="An island in the middle of the sea in Turkey" id="backgroundImage"> 

</div>

私が持っているCSSは次のとおりです。

body { 
margin: 0; 
} 

#container { 
width: 100%; 
height: 100%; 
margin: 0; 
} 

#backgroundImage { 
width: 100%; 
position: fixed; 
top: 0; 
left: 0; 
} 

html, body { 
overflow: none !important; 
overflow-x: none !important; 
overflow-y: none !important; 
}

私が試してみましたJSの解決策の一つは、これがある：あなたができるjQueryを使って

var image = new Array(); 
image[0] = "http://placehold.it/20"; 
image[1] = "http://placehold.it/30"; 
image[2] = "http://placehold.it/40"; 
image[3] = "http://placehold.it/50"; 
var size = image.length 
var x = Math.floor(size*Math.random()) 

$('#backgroundImage').attr('src',image[x]);

出典

2016-12-15 BenRichi_

あなたは動作しませんでしたあなたは試してみましたJavaScriptコードの例を持っていますか？ – Bastiaanus

@Bastiaanus yeah申し訳ありません、ただそれを含めました –

：あなたが準拠する乱数のいくつかの種類が必要になります

var picArr = [imageSrc1 ,imageSrc2 ,imageSrc3];

れた後、上記の配列にあるイメージsrcの量。

http://www.w3schools.com/jsref/jsref_random.asp

あなたはここに

をMath.random()を使用することがあります次に、あなたは、ドキュメントのロード上記のあなたの背景のSRCを変えることときに実行されなければならない関数を作成する必要があります。

最終的な機能は、次のようになります。

var picArr = ['src0', 'src1', 'src2', 'src3', 'src4', 'src5', 'src6', 'src7', 'src8', 'src9', ]; 

var myNumber = Math.floor((Math.random() * 10) + 1); 

$(document).ready(function() { 
    $("#backgroundImage").attr('src', picArr[myNumber]); 
});

出典

2016-12-15 14:52:01

すべての応答をありがとうが、この1つはすぐに働いた、ちょうど画像を追加する必要があった！ –

このようなもの

See jsfiddle here

あなたがそうのようなJavaScriptで保存された画像の配列を持っている必要がありそう

var images = ['http://farm5.static.flickr.com/4017/4717107886_dcc1270a65_b.jpg', 'http://farm5.static.flickr.com/4005/4706825697_c0367e6dee_b.jpg', 'https://s-media-cache-ak0.pinimg.com/originals/c6/8a/51/c68a5157020c8555ca781839d754a1a0.jpg']; 
 

 
    var randomImage = Math.floor(Math.random() * 3) 
 

 
    $(document).ready(function() { 
 
     $("#container").css("background-image", "url('" + images[randomImage] + "')"); 
 
    })

html, body { 
 
    height: 100%; 
 
} 
 

 
#container { 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-position: center; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div id="container"></div> 
 
</body>

出典

2016-12-15 14:51:03

私はこれを試しても、Webページ上に何も表示されません。 –

'$（" body "）に正しいIDを使用する必要があります。 css（ "background-image"、 "url（ '" + images "[randomImage] +）"、 "イメージ"、 "url（'" +イメージ[randomImage] "）"）; ' –

' $（ '＃container'） ' –

ウェブページのランダム背景画像

答えて

関連する問題