I am trying to find a way that I can have an image that takes up the whole browser window and is responsive. Every time the page is loaded I would like the background image to change from a select group of photos that I have locally.
I have tried a few solutions on here but nothing is really working. The HTML I have is:
<div id="container">
<img src="Images/IMG_3764.JPG" alt="An island in the middle of the sea in Turkey" id="backgroundImage">
</div>
The CSS I have is:
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;
}
One of the JS solutions that I have tried is this:
var image = new Array ();
image[0] = "";
image[1] = "";
image[2] = "";
image[3] = "";
var size = image.length
var x = Math.floor(size*Math.random())
$('#backgroundImage').attr('src',image[x]);
I am trying to find a way that I can have an image that takes up the whole browser window and is responsive. Every time the page is loaded I would like the background image to change from a select group of photos that I have locally.
I have tried a few solutions on here but nothing is really working. The HTML I have is:
<div id="container">
<img src="Images/IMG_3764.JPG" alt="An island in the middle of the sea in Turkey" id="backgroundImage">
</div>
The CSS I have is:
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;
}
One of the JS solutions that I have tried is this:
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]);
- Do you have an example of javascript code you have tried that did not work? – Bastiaanus Commented Dec 15, 2016 at 14:46
- @Bastiaanus yeah sorry, just included it – bchards Commented Dec 15, 2016 at 14:49
2 Answers
Reset to default 3Your going to need to have an array of images stored in JavaScript like so:
var picArr = [imageSrc1 ,imageSrc2 ,imageSrc3];
After which you'll need some kind of random number that conforms to the amount of image src's you have in the above array.
http://www.w3schools./jsref/jsref_random.asp
You'll be using Math.random() here
Then you'll need to create a function that shall be executed when the document loads that changes the src of your background above.
Your final function might look like this:
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]);
});
With jquery you could do something like this
See jsfiddle here.
var images = ['http://farm5.static.flickr./4017/4717107886_dcc1270a65_b.jpg', 'http://farm5.static.flickr./4005/4706825697_c0367e6dee_b.jpg', 'https://s-media-cache-ak0.pinimg./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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="container"></div>
</body>发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745492876a4630064.html
评论列表（0条）