CODEWITHSUNDEEP
javascript
user222427
user222427

Reputation:

Issues with dynamic fullsize resizes of an image when the image is chosen by random via jscript

I really just want whatever image is loaded via the below jscript to be fullscreen based on whatever monitor resolution the user is looking at.

var randomImages = new Array("Images/bodybg1.jpg", "Images/bodybg2.jpg", "Images/bodybg3.jpg", "Images/bodybg4.jpg", "Images/bodybg5.jpg");
var randomNumber = Math.floor((randomImages.length - 0) * Math.random()); $('#full-screen-background-image').prop('src', randomImages[randomNumber]);

Here is the HTML <img alt="no image" id="full-screen-background-image" class="fssi" src="" />

Is there a way to dynamically resize that image. I tried the sample here:http://jsbin.com/okizi5

However, I cannot seem to get the image to resize.

Upvotes: 0

Views: 48

Answers (1)

Andrey
Andrey

Reputation: 752

does setting image size to whole page work?

<img alt="no image" id="full-screen-background-image" class="fssi" src="" style="width: 100%; height: 100%;"/>

UPDATE

It is not possible to setup image dimension to user's monitor resolution using css from the server. But you could access current monitor dimensions by script. So add following script to your page

var img = document.getElementById("full-screen-background-image");
img.width = window.screen.width;
img.height = window.screen.height;

UPDATE 2

How to set dimension of background image

$('body').css({
     'background-image': 'url(' + randomImages[randomNumber] + ')', 
     'background-repeat': 'no-repeat', 
     'background-size':  window.screen.width + 'px ' + window.screen.height + 'px' 
});

Upvotes: 1

Related Questions