On scroll jquery change html header tag background image

Question

below is my simple code to change the background image of header tag but it is not working at the moment

$(window).scroll(function() {
    if ($(this).scrollTop() > 400) {
        $("header").css("background", "url(http://www.kreativestudio.ca/wp-content/themes/parasponsive/images/header_bg2.png) repeat-x scroll 0px rgba(0, 0, 0, 0) !important");
    } 
    else {
        console.log('there');
        $("header").css("background", "url(http://www.kreativestudio.ca/wp-content/themes/parasponsive/images/header_bg.png) repeat-x scroll 0px rgba(0, 0, 0, 0) !important");
    }
});

whats the matter in this code?

There's nothing obviously wrong with it. Have you tried to debug at all? Checked the console for errors? Is 'there' appearing in the console? Help us to help you. — Rory McCrossan, Nov 11 '14 at 11:47
No not even an error u can check my website www.kreativestudio.ca no background at all — khan jana, Nov 11 '14 at 11:58
what is header ?? view-source and check how many occurrence of header you have in your html — Rizwan Mumtaz, Nov 11 '14 at 12:12
Just change background-image to background and you should be ok — Ruben-J, Nov 11 '14 at 12:13
Still issue i changed it any one can check it www.kreativestudio.ca — khan jana, Nov 11 '14 at 12:14

score 1 · Accepted Answer · edited May 23 '17 at 10:26

Remove !important from your jquery statement.

$(window).scroll(function() {
    if ($(this).scrollTop() > 400) {
        $("header").css("background", "url(http://www.kreativestudio.ca/wp-content/themes/parasponsive/images/header_bg2.png) repeat-x scroll 0px rgba(0, 0, 0, 0)");
    } 
    else {
        $("header").css("background", "url(http://www.kreativestudio.ca/wp-content/themes/parasponsive/images/header_bg.png) repeat-x scroll 0px rgba(0, 0, 0, 0)");
    }
});

It's not necessary because its an inline style and jquery css can't handle it correctly.

If however you need it to be important, check out this question: How to apply !important using .css()?

Thanx Mr Ruben -J this Worked – khan jana Nov 12 '14 at 06:02 — khan jana, Nov 12 '14 at 06:02

sasi · Answer 2 · 2014-11-11T13:16:50.897

Syntax is wrong change background-image to background and add few css
html,body{
    width:100%;
    height:100%;
    float:left;
}
header {
    width:100%;
    height:100%;
    float:left;    
}

$(window).scroll(function() {
    if ($(this).scrollTop() > 400) {
        $("header").css("background", "url(http://www.kreativestudio.ca/wp-content/themes/parasponsive/images/header_bg2.png) repeat-x scroll 0px rgba(0, 0, 0, 0)");
    } 
    else {
        $("header").css("background", "url(http://www.kreativestudio.ca/wp-content/themes/parasponsive/images/header_bg2.png) repeat-x scroll 0px rgba(0, 0, 0, 0)");
    }
});

FIDDLE

score 0 · Answer 3 · answered Nov 11 '14 at 12:00

the problem is in the applied CSS, in background-image you're only allowed to define the background image, "background" is the deal for you, try this (I also changed the code slightly but that's just a matter of taste ;)):

$(window).scroll(function() {

    if ($(this).scrollTop() > 400) {

      $("body").css({
        "background": "url(http://www.kreativestudio.ca/wp-content/themes/parasponsive/images/header_bg2.png) repeat-x scroll 0px rgba(0, 0, 0, 0)"
      });
    } else {
        console.log("there");

      $("body").css({
        "background": "url(http://www.kreativestudio.ca/wp-content/themes/parasponsive/images/header_bg.png) repeat-x scroll 0px rgba(0, 0, 0, 0)"
      });
    }
});

exactly but here you'll need background because not only the image url isset with the script — Adrian Fella, Nov 11 '14 at 14:48

On scroll jquery change html header tag background image

3 Answers3