如何通过javascript更改背景重复和背景大小

Question

I currently have this and it's working for me:

<script type='text/javascript'>
            $(function () {
                var body = $('body');
                var backgrounds = [
                  'url(http://localhost:12448/css/images/back1.jpg) no-repeat',
                  'url(http://localhost:12448/css/images/back2.jpg) no-repeat'];
                var current = 0;

                function nextBackground() {
                    body.css(
                        'background',
                    backgrounds[current = ++current % backgrounds.length]);

                    setTimeout(nextBackground, 5000);
                }
                setTimeout(nextBackground, 5000);
                body.css('background', backgrounds[0]);               
            });
</script>

I need to implement also this part of css code in to my javascript, so i can get dynamically changing background and the same css settings as it changes:

body
    {
        background-image:           url('images/overlay.png'),      url('images/bg.jpg');
        background-repeat:          repeat,                         no-repeat;
        background-size:            auto,                           100% 100%;
    }

Can anyone help me with this?

Answer 1

Solution:

The main problem here is that you are setting the background attribute, which overwrites all of the -size , -repeat , and -image attributes. Instead, change the background-image attribute only.

This will require changes to your urls, as you have appended no-repeat to the ends of them.

---

Some syntactical good practices:

1. Don't define function s inside a jQuery ready block.
2. Put your pertinent variables outside the jQuery block so that they are global and can be used in the function.

---

 var body = $('body'); var backgrounds = [ 'url(http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png)', 'url(http://www.logospike.com/wp-content/uploads/2014/11/Google_logo-8.jpg)' ]; var current = 0; $(function() { setTimeout(nextBackground, 5000); body.css('background-image', backgrounds[0]); }); function nextBackground() { body.css( 'background-image', backgrounds[current = ++current % backgrounds.length]); setTimeout(nextBackground, 5000); } 

 html{ margin: 0; height: 100%; } body { background-image: url('images/overlay.png'), url('images/bg.jpg'); background-repeat: repeat, no-repeat; background-size: 100% 100%; height: 100%; margin: 0; } 

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