Random background image AND corresponding style

Question

I am implementing this Simple Image Randomizer to load random images from a list for my body.

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg'];
$('body').css({'background-image': 'url(images/' + images[Math.floor(Math.random() *      images.length)] + ')'});

Problem is, each of the images is prepared to sit in one specific corner of the screen. How would I add a corresponding list, which stores the background styles for each image, and how would I reach this over to the script? I also tried to enhance the script manually to sth like

  $('body').css({'background': 'url(images/' + images[Math.floor(Math.random() *      images.length)] + ')' + "no-repeat fixed top left});

..but that also seems not to work. And it would only be half the battle.

ok coded updated to do what you want... let me know. – Luca Filosofi Mar 26 '14 at 14:01 — Luca Filosofi, Mar 26 '14 at 14:01

score 0 · Answer 1 · answered Mar 25 '14 at 17:37

0

A possibility:

 $('body').css({'background-image':'url(' + images[Math.floor(Math.random() *      images.length)] + ')','background-repeat': 'no-repeat','background-position': '200px 70px'});

jsfiddle

answered Mar 25 '14 at 17:37

abfurlan

415
5
14

yes thx, this seems to work for manually inserting the position, just tried it. – JuliaWatanabe Mar 25 '14 at 21:16

Luca Filosofi · Accepted Answer · 2019-12-07T21:35:00.997

0

demo: https://so.lucafilosofi.com/random-background-image-and-corresponding-style

    $(function(){
        var positions = ['top-left-', 'top-right-', 'bottom-left-', 'bottom-right-'];

        var images = {
            'top-left-' : [1,2,3],
            'top-right-' : [4,5,6],
            'bottom-left-' : [7,8,9],
            'bottom-right-' : [10,11,12]
        };

        function randomize(){
            for(var i = 0; i < positions.length; i++ ){
                var pos = positions[i];
                var random_image = images[pos][Math.floor(Math.random() * images[pos].length)];
                $('<div style="position:absolute;width:400px;height:200px;z-index:1;background:url(images/' + random_image + '.jpg) no-repeat top left;'+ pos.replace(/-/ig, ':0px;')+'"></div>').appendTo('body');
        }
    }
    randomize();
});

edited Dec 07 '19 at 21:35

answered Mar 25 '14 at 17:45

Luca Filosofi

30,905
9
70
77

thx. how would I load the output into the body-background for one of the images at a time, and not showing the divs (or instead, showing only one div)? The scripting looks promising, but I'm not able to get this right with the divs. – JuliaWatanabe Mar 25 '14 at 21:58
@JWatan: help me to understand... do you want just one container for all the corners? – Luca Filosofi Mar 25 '14 at 22:08
The idea to have a random image appear in one specific corner is correct. But just one at a time. So lets say I have 3 images for top-left, 2 for top-right, 3 for bottom-left, and 1 for bottom-right. With each page reload, Just one of these should appear at all. – JuliaWatanabe Mar 25 '14 at 22:34
..so it would be exactly like my initial script, just with the extension that I need to associate a specific (pre-defined) background-style to each of the images. I thought maybe a second variable (or extended first var), which contains the addional info like "top left", would be possible.. And that var's content would have to go into the last line of the script, similar like Anderson B. Furlan wrote, just automagically. – JuliaWatanabe Mar 25 '14 at 22:38
just one thought, as I'm not that ace in coding: as I need nothing fully automatic (my images won't change that often), wouldn't it be possible, to have the var "images" not only contain the name/number of the image, but also the position? So, instead of writing "a":...,"b":... I'd write "top left":[1,2,3], "bottom left":[4,5,6], and that "top left" would directly be put in the last script line, when the random algorithm chooses img 1,2, or 3? – JuliaWatanabe Mar 25 '14 at 22:54
@JWatan: updated code and demo, now it should do what you want... let me know. – Luca Filosofi Mar 26 '14 at 00:48
great. I will test in the evening. Your updated sample-site does ~ what I wanted. But somehow, it just loads in the top-left & right, and sometimes leaves some pixels from top, and sometimes the image needs 5 seconds to load,... – JuliaWatanabe Mar 26 '14 at 10:22
@JWatan: randomness and image speed-load are not related to my code snippet, for fast image load you have to use htaccess see this: http://stackoverflow.com/questions/447014/website-image-caching-with-apache; for randomness you have to use something like cookies or session in order to be sure to display each time on different corner; btw i'm preparing a live example of both this... stay tuned – Luca Filosofi Mar 26 '14 at 12:22
hi devil, I won't use the cookies part as it would be too much for my little idea, and btw it's ok for me to have totally randomness, so it may happen that an image re-loads in same corner twice or more.. sorry, all this hassle jsut because I cannot decide for one single image ;) – JuliaWatanabe Mar 26 '14 at 15:57
@JWatan: you don't understand me, images are random, only corner display in order each time you refresh the page, so, on 1st refresh display top-left corner, 2nd refresh display top-right corner and so on... – Luca Filosofi Mar 26 '14 at 16:18
yes I think I understood that. I do not need it, but am sure others might. For my site it is better if the random-algorithm chooses any of all pictures for every reload, and the scripts somehow gets its information where this chosen image will be placed.. – JuliaWatanabe Mar 26 '14 at 18:28
@JWatan: so what i have to do? do you want both corners and images appear randomly? – Luca Filosofi Mar 26 '14 at 18:32
yes, but all 4 corners :) You have to understand that each of my images is designated for a special corner, as it won't look correct in the other 3 corners --- I will also play around with your code. thank you so much for your effort - I appreciate it. – JuliaWatanabe Mar 26 '14 at 18:55
this is almost as I want it, thank you so much. But again, I think you coded way more than I needed, because, I need only one image appearing at a time. But anyhow, I was just examining your code, so I will enhance that examination to this new version and try to just view one of the corners. I cannot believe you took all your time! thank you – JuliaWatanabe Mar 26 '14 at 22:57

score 0 · Answer 3 · answered Mar 26 '14 at 23:32

thanks go to aSeptik and his efforts.

I found the following to be working like I need it, based on his code:

$(function(){
        var positions = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
    var images = {
        'top-left' : [7],
        'top-right' : [0,5],
        'bottom-left' : [2,4,6],
        'bottom-right' : [1,3,8]
    };

    function randomize(){
        var pos = positions[Math.floor(Math.random() * positions.length)];
        var random_image = images[pos][Math.floor(Math.random() * images[pos].length)];
        $('body').css('background', 'url("images/' + random_image + '.jpg") no-repeat ' + pos.replace(/-/, ' '));
    }

    randomize();
});

I would have one remaining question on this one: currently it seems, that each of the 4 corners has same probability to appear, so some images appear more often than others, because for example in top-left corner only one image is available. how would the code look for all images having same probability to appear? — JuliaWatanabe, Mar 27 '14 at 21:28

Random background image AND corresponding style

3 Answers3