onload javascript assign background image to div

Question

I have this code which loads different images to an "img" by printing its url via javascript in its "src". After the CSS does the magic regarding the content in the "img" tag.

$(window).load(function() {
    var randomImages = ['img1','img2','img3','img4','img5','img6','img7','img8','img9','img10','img11','img12','img13','img14','img15','img16','img17','img18','img19','img20','img21','img22','img23','img24','img25','img26','img27','img28','img29','img30'];
    var rndNum = Math.floor(Math.random() * randomImages.length);

     var $win = $(this);
     var iMac = $(window).width() > 1920 ? '_imac' : '';
     var $img = $('#background').attr('src', '_img/bg/index_rnd/' + randomImages[rndNum] + iMac + '.jpg').css({'position':'fixed','top':0,'left':0});
        function resize() {
            if (($win.width() / $win.height()) < ($img.width() / $img.height())) {
              $img.css({'height':'100%','width':'auto'});
            } else {
              $img.css({'width':'100%','height':'auto'});
            }
        }
        $win.resize(function() { resize(); }).trigger('resize');
    });

I'm creating a new web and I would like to use the same system selecting a picture of an array, BUT applying the url of the foto to a css background image.

#home{
    background: url(INSERT URL OF JAVASCRIPT HERE) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

I tried in the code below, but I think in a clumsy way. I don;t know if this is even possible or if there is a more simple way than this method via javascript. As you see I'm not an expert.

$(window).load(function() {
    var randomImages = ['img1','img2','img3'];
    var rndNum = Math.floor(Math.random() * randomImages.length);
    var url = 'url(_img/bg_array/' + randomImages[rndNum] + '.jpg)'


    $('#home').css({
        'background:' url 'no-repeat' 'center' 'center' 'fixed', 
        '-webkit-background-size': 'cover',
        '-moz-background-size': 'cover',
        '-o-background-size': 'cover',
        'background-size': 'cover'
        });
    }

THANK YOU!!!!

EDIT: MORE INFO //////////////////////////////

The answer of jfriend00 seems 100% correct and logic. I'm trying to use the second option. I've tried both options and neither seems to work. I've also tried to apply a simple code to #home via javascript and it doesnt work... So I think there is a problem with the link between the javascript file and the html, maybe the problem is somewhere else...

Here I will put more possible useful information. I insert my html and my connections to differnt files in the head, maybe thats helpful. I'm creating a web with a horizontal layout. It works perfectly via jquery...



    
        
        DJ Femke

        

        
        
        
        


        
        
    
    
        
            

                

                    
                    item1 
                        1 | 
                        2 | 
                        3 | 
                        4 | 
                        5
                        6
                        BOOKING
                    
                

                
                    
                    about_me
                        1 | 
                        2 | 
                        3 | 
                        4 | 
                        5
                        6
                        ABOUT ME
                    
                

                
                    
                    item3
                        1 | 
                        2 | 
                        3 | 
                        4 | 
                        5
                        6
                        HOME
                    
                

                
                    
                    item4
                        1 | 
                        2 | 
                        3 | 
                        4 | 
                        5
                        6
                        MUSIC
                    
                

                
                    
                    item5
                        1 | 
                        2 | 
                        3 | 
                        4 | 
                        5
                        6
                        PHOTO AND VIDEO
                    
                

                
                    
                    item6
                        1 | 
                        2 | 
                        3 | 
                        4 | 
                        5
                        6
                        CONTACT

The javascript in my file onload.js is the following:

$(window).load(function() {
    var randomImages = ['img1','img2','img3'];
    var rndNum = Math.floor(Math.random() * randomImages.length);
    var url = 'url(_img/bg_array/' + randomImages[rndNum] + '.jpg)'

    $('#home').css({
        'background': url + 'no-repeat center center fixed', 
        '-webkit-background-size': 'cover',
        '-moz-background-size': 'cover',
        '-o-background-size': 'cover',
        'background-size': 'cover'
    });
}

Maybe its handy... my file structure: enter image description here

jfriend00 · Accepted Answer

You have two choices for setting the background image via javascript. You can set just the background-image CSS property or you can add strings together to form the entire string for the background property.

Option 1:

$(window).load(function() {
    var randomImages = ['img1','img2','img3'];
    var rndNum = Math.floor(Math.random() * randomImages.length);
    var url = 'url(_img/bg_array/' + randomImages[rndNum] + '.jpg)';


    $('#home').css('background-image', url);
});

Option 2:

$(window).load(function() {
    var randomImages = ['img1','img2','img3'];
    var rndNum = Math.floor(Math.random() * randomImages.length);
    var url = 'url(_img/bg_array/' + randomImages[rndNum] + '.jpg)'

    $('#home').css({
        'background': url + ' no-repeat center center fixed', 
        '-webkit-background-size': 'cover',
        '-moz-background-size': 'cover',
        '-o-background-size': 'cover',
        'background-size': 'cover'
    });
 });

You were also missing a closing ); at the end of your code that completes the $(window).load() statement.

Working example of the 2nd option: http://jsfiddle.net/jfriend00/rGkww/

onload javascript assign background image to div

Answers (2)

Related Questions