Using css and jQuery

Question

I want to make a fixed background changes with jQuery. I put the style of body as follows

body {
  background-attachment:fixed;
}

Untill now everything is ok and the background is not scrolling, but when I use the jQuery to make it change it start scrolling again.

This is the jquery code :

$(function () {
var body = $('body');
var backgrounds = [
  'url(./images/001.jpg)', 
  'url(./images/02.jpg)','url(./images/03.jpg)','url(./images/04.jpg)','url(./images/05.jpg)'];
var current = 0;

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

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

Can any one help please?

change background image instead of background - by changing background, you are resetting a lot of the other values — Pete
– Pete, Commented Dec 2, 2016 at 14:33

Akshay · Accepted Answer · 2016-12-02 14:33:31Z

4

Edit body.css('background', backgrounds[0]);

to body.css('background-image', backgrounds[0]);

because the first code changes its entire background properties including background-attachment

so background-attachment changes backs to its default value, ie scroll

answered Dec 2, 2016 at 14:33

Akshay

14.4k5 gold badges49 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

AnaS Kayed Over a year ago

i found another problem that the first image is fixed , but the next images are scrolling.. any help ?

Akshay Over a year ago

body.css( 'background', change that too to background-image

AnaS Kayed Over a year ago

yeah it worked right , thanks alot ;) you'r great @Akshay

AnaS Kayed Over a year ago

im sorry for asking alot, but can you help me making the transition by opacity ? i mean not to appear directly but something like fade in

Akshay Over a year ago

It is really hard to fade in backgrounds @AnaSKayed you should stack divs and fade them in using jquery

|

Collectives™ on Stack Overflow

Using css and jQuery

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related